react

在本文中，我们将研究如何使用React的严格模式来获得有关开发期间过时的API和副作用的额外警告。 严格模式 严格模式是用于突出显示应用程序中潜在问题的工具，它不会呈现任何可见的UI。 它只用于激活对其后代的额外检查和警告。 严格模式不会影响生产环境。 我们可以将严格模式添加到React应用程序，如下所示： class App extends React . Component { render() { return ( < div > < p > foo </ p > < React.StrictMode > < p > bar </ p > </ React.StrictMode > </ div > ); } } 复制代码 在上面的代码中，带有 'foo' 的 p 标签不在严格模式下检查，因为它位于 React.StrictMode 组件的外部，但是内部的 p 元素则由严格模式检查。 识别不安全的生命周期 严格的模式检查不安全的生命周期，一些生命周期方法正在被弃用，因为它们鼓励了不安全的编码实践。 他们是： componentWillMount componentWillReceiveProps componentWillUpdate UNSAFE_ 前缀将在以后的版本中添加。 有2种新的生命周期方法正在替代上述方法。它们是静态的

在前面的文章中我们也聊了许多 Vue3.x 相比 Vue2.x 有哪些变化，也介绍了一些它的特点，今天就重点介绍下它新增的这些特性。 本文主要参考： vueschool.io/articles/vu… 总览 Compostion API 合成API 取消 Vue 全局变量 自定义指令 Directives API调整 Component 组件支持 v-model 指令 Fragments Template 支持有多个根节点 Suspense Template Fallback 组件 Teleport Template Dom占位传递组件 1 Compostion API 合成API 上一篇文章已经重点介绍过了。 查看： juejin.im/post/5e8010… 2 取消 Vue 全局变量 Vue2.x 中的代码片段： import Vue from 'vue' import App from './App.vue' Vue.config.ignoredElements = [ /^app-/ ] Vue.use( /* ... */ ) Vue.mixin( /* ... */ ) Vue.component( /* ... */ ) Vue.directive( /* ... */ ) new Vue({ render : h => h(App) }).$mount( '

一、前端开发环境 1、开发环境 windows 10操作系统； Node.js v10.16.0； webstorm 2019.3.4 x64； 2、前端技术栈 react v16.9 hooks + redux + react-router4； antd； marked hightlight.js； webpach打包优化； axios封装； 二、前端知识回顾 1、基础学习 如果没有接触过react的话，推荐先学习一下react基础知识： 1、react的入门教学视频入口： React 入门教程（开发文档） ； 2、官方教程入口： 入门教程: 认识 React ； 3、redux教程： 从零实现一个 redux ； 2、命名规范 html标签：小写字符开始； 自定义React组件：大写字符开始； 其它变量、方法：函数驼峰命名法； 文件夹、文件命名：全部小写，中间使用-分割，如data-assets； 三、npm使用 1、npm介绍 npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从npm服务器下载别人编写的第三方包到本地使用； 允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用； 允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用； 由于新版的Node.js已经集成了npm

参考React官方文档，这里做下笔录 （1）setState语法 setState(updater, [callback])解析：　　参数一为带有形式参数的 updater 函数：　　参数二为可选的回调函数 　　 1、参数一介绍 　　 　　注意：当然，它不应直接被修改。你应该使用基于 state 和 props 构建的新对象来表示变化。例如，假设我们想根据 props.step 来增加 state： 　　 　　updater 函数中接收的 state 和 props 都保证为最新。updater 的返回值会与 state 进行 浅合并 。 　　 　　 　　所以我们一般在使用时会用其简洁语法 简洁语法格式如下：this.setState({ counter }) 　　 2、问题：参数一什么时候使用对象格式、什么时候使用函数格式？ 　　案例如下，两种形式实现累加效果 　　 对象方式是函数方式的简写方式 如果新状态不依赖于原状态 ===> 使用对象方式 如果新状态依赖于原状态 ===> 使用函数方式 如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取 　　关于依赖和不依赖，如下： 　　 　　 　　 3、参数二介绍 setState() 的第二个参数为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行。通常，我们建议使用

1.安装 1.1 创建一个全新的应用 //全局安装 npm install -g create-react-app //创建新应用 my-app是文件夹名称 create-react-app my-app cd my-app npm start 1.2 加入到存入的项目中 yarn yarn init yarn add react react-dom npm npm init npm install --save react react-dom 1.3 使用cdn <script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script> <script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 2.'hello world' domo import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('app') ); 3.介绍jsx import React from "react"; import

Lists and Keys React支持以数组的形式来渲染多个组件，它会将你数组中的每个组件以列表的形式渲染开来。 当你使用数组的方式来渲染你的组件时，你需要给每个组件一个Key值,否则会出现一个警告，提示指出应该为列表的每一项提供一个属性key，如下代码所示： function NumberList(props) { const numbers = props.numbers; const listItems = number.map(item => <li>{item}</li>); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ) 分配key后的代码如下： function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map(item => <li key={item.toString()}> {item} </li> ); return ( <ul>{listItems}</ul> ) } const

1.什么是HOC? HOC(Higher-order component)是一种React 的进阶使用方法，只要还是为了便于组件的复用。强调一点，HOC本身并不是 React API, 它就是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法。 概括的讲，HOC能够实现： 1. 代码复用，代码模块化 2. 渲染劫持, 操作state 3. Props 增删改 HOC的实现方式 在这节中我们将学习两种主流的在 React 中实现高阶组件的方法：属性代理（Props Proxy）和 反向继承（Inheritance Inversion）。 基于反向继承（Inheritance Inversion, 缩写II)的方式 反向继承的实现为： 返回的高阶组件类（Enhanced）继承了 WrappedComponent。这被叫做反向继承是因为 WrappedComponent 被动地被 Enhancer 继承，而不是 WrappedComponent 去继承 Enhancer。 反向继承允许高阶组件通过 this 关键词获取 WrappedComponent，意味着它可以获取到 state，props，组件生命周期（component lifecycle）钩子，以及渲染方法（render）。 使用高阶组件遇到的问题 静态方法丢失 当使用高阶组件包裹原始组件

当前前端三大框架(vue、react和angular)，除了vue之外，国内用得最多的就是react了，之前一直对其实现原理比较好奇，在花了很多时间深入研究了其源码实现后，本篇开始记录一下 同样的功能,用vue和react都能实现，相比较vue,react的学习门槛比较高，但是好处是它非常灵活，执行的效率更高(用到了很多新的技术)，我个人觉得react的代码和vue的代码就像linux和windows，前者很注重javascript功底(类似linux的shell命令)，后者有很多现成的html扩展标签指令( v-for、v-if等，类似windows的图形界面)，所以如果一个人的js语言研究得比较深入，和一个刚刚入门js语言的程序员来说，用React实现了同样的需求，敲出来的代码质量会差很多的 react更加的纯粹，这里的纯粹指的是什么的，在react内部，jsx模板经babel转化后是一个对象，所有的操作都是基于这个对象和其对应的fiber结构来操作的。 vue和react有许多共同点，比如: 都使用了虚拟DOM 更新时都使用了diff算法进行了优化 react和vue的不同之处如下 writer by:大沙漠 QQ:22969969 vue框架 react框架 实现原理 将模板转化成一个render函数来执行 将每个节点转化为fiber对象,最终形成一个fiber树结构

ReactJSX JSX允许我们 javascript代码中写HTML，而 不是用HTML包含JavaScript。 JSX介绍 JSX由来 React是通过JavaScript生成用户界面。如果通过JavaScript语法写HTML代码，那将是一个灾难。JSX出现就是为了让我们可以在JavaScript代码中书写HTML语法来提高我们的开发效率。 JSX是什么 JSX = JavaScript XML是一种在React组件内部构 建标签的类XML语法。 在不使用JSX，情况下我们需要通过React.createElement方法来创建标签。 React.createElement('h3',{className:'title'},'你好，卓易!') 如果使用了JSX,上述的函数调用就变为了非常熟悉的HTML标签： <h3 className='title'>你好，卓易！</h3> React中JSX基本原理就是把JSX中出现的html标签自动转换成React.createElement，这样就转换成了js代码。我们也可以通过React.createElement去创建组件，这样可以不必使用JSX，但是这样相对复杂。 JSX赋予了React强大的表现力，使得我们在开发中利用JSX可大大的提高开发效率。 为什么使用JSX 使用JSX有着非常多的好处，而这些好处会随着项目的日益增大

1.安装必须的软件 1.Python 2 注意勾选 Add python.exe to Path,选项，这样就可以在安装完成后，不用手动去添加环境变量 安装完，打开cmd.exe,输入python,然后enter,如果能成功返回ptython的版本号等信息，则说明安装成功。 2.Node.js 安装完node之后，打开cmd.exe,输入node -v,如果返回node.jsben，则说明node.js,安装成功。 由于npm在国内的速度奇慢，建议使用淘宝代理，或者使用其他科学上网工具 使用淘宝代理的方法： npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 3.安装react-native命令行工具(react-native-cli) npm install -g yarn react-native-cli 安装成功之后，打开cmd.exe,输入 react-native -v ,然后enter,如果能成功返回react-native的版本号，则说明安装成功。 4.安装Android Studio a.安装jdk 需要jdk1.8以上版本,具体安装教程： http://jingyan