React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps,componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。 getDerivedStateFromProps:组件每次被 rerender的时候,包括在组件构建之后(虚拟 dom之后,实际 dom挂载之前),每次获取新的 props或 state之后;每次接收新的props之后都会返回一个对象作为新的 state,返回null则说明不需要更新 state;配合 componentDidUpdate,可以覆盖 componentWillReceiveProps的所有用法
原因就是 React会批处理机制中存储的多个 setState进行合并,如果传入的是对象,很明显会被合并成一次,所以下面的代码两次打印的结果是相同的:
componentDidMount() {
this.setState({ index: this.state.index + 1 }, () => {
console.log(this.state.index);
})
this.setState({ index: this.state.index + 1 }, () => {
console.log(this.state.index);
})
}
=>Object.assign(nextState, {index: state.index+ 1},{index: state.index+ 1})
在原生的 JavaScript程序中,我们直接对 DOM进行创建和更改,而 DOM元素通过我们监听的事件和我们的应用程序进行通讯。而 React会先将你的代码转换成一个 JavaScript对象,然后这个 JavaScript对象再转换成真实 DOM。这个 JavaScript对象就是所谓的虚拟 DOM。
当我们需要创建或更新元素时, React首先会让这个 VitrualDom对象进行创建和更改,然后再将 VitrualDom对象渲染成真实DOM。当我们需要对 DOM进行事件监听时,首先对 VitrualDom进行事件监听, VitrualDom会代理原生的 DOM事件从而做出响应。
JSX只是为 React.createElement(component,props,...children)方法提供的语法糖。所有的 JSX代码最后都会转换成 React.createElement(...), Babel帮助我们完成了这个转换的过程。所以使用了 JSX的代码都必须引入 React。
捕获子组件中发生的错误,在父组件中进行设置 componentDidCatch (error, info) { this.setState({ error: true }); }
添加有个没有实际意义的节点<React.Fragments></React.Fragments>
function com(props){ return () }
等同构造函数
useState这个函数可以允许在纯函数中操作状态,它的参数就是初始化的state数据,可以在组件中多次使用
import React, { useState } from 'react';
function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0);
return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
jsx并不是html,而是一个js对象,它是react提供的语法糖,原本react提供的是React.createElement()方法,这就是虚拟DOM,打包的时候babel-loader会将jsx编译成react认识的createElement()
再使用render将虚拟DOM转化成真是真实DOM;