1. mounting阶段执行的生命周期函数
constructor()
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()
1.1 render()
render方法是必须的，当render方法被调用是，会首先查看this.props和this.state然后return下面其中一个类型的信息
React elements: 通过JSX创建的react 元素，可以被原生的html组件如<div/>,或者用户自定义的组件如<MyComponent />包含
String and numbers: string和numbers会被渲染成DOM中的文本节点
Portals: 调用ReactDOM.createPortal方法
null: 什么都不渲染
Booleans: 什么都不渲染，一般用于return test && <Child />这种模式，其中test为boolean
render方法说明: render方法应该是个纯方法，不应该受到组件中state的影响，每次调用应该返回相同的结果，不直接被浏览器所影响；同时当shouldComponentUpdate方法返回false时，render方法将不会执行
Fragments
用于返回多个标签，而不需要添加额外的包裹元素
举个栗子：
render() {
<Fragment>
<span>用户名：</span>
<input type="text" name="userName"/>
</Fragment>
}
目前Fragment标签只能接收属性key，未来可能添加事件处理方法;当存在多个Fragment元素时，需要添加不同的key值，否则会抛出警告；Fargment也可以用<></>来代替,只是该空标签不能接收参数；
render(){
return (
<React.Fragment>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</React.Fragment>
)
}
1.2 constructor()
constructor()是在React 组件在mounted之前调用的方法，当创建的组件extends React.Component是，在调用constructor()方法内，必须先调用super(props)
官方推荐使用constructor()方法可以用来初始化state属性，只需要将一个对象赋值给this.state即可，不需要调用setState方法
1.3 static getDerivedStateFromProps(props, state)
getDerivedStateFromProps方法在每次render方法调用之前被调用，并且与UNSAFE_componentWillReceiveProps方法只能在父组件引起的re-render时，才能调用不同的是，getDerivedStateFromProps方法在每次render之前都会被调用，并且返回值将被放到state中。
1.3 UNSAFE_componentWillMount
该方法在mounting之前被调用，由于其异步渲染存在不安全行，因此在React 17中将会被去掉，至于其异步渲染不安全原因暂时还没研究
1.4 componentDidMount
该方法在mounting结束后执行，官方推荐在该方法中请求远程数据或者放置定时器等信息，同时定时器等信息需要在componentWillUnMount()方法中清除
注：在这里调用setState方法会导致额外的rending，但是这个渲染会在浏览器更新屏幕之前完成，因此不必担心会影响用户的视觉体验。该方法多数情况，会应用于需要根据DOM节点的位置或者大小来展示tooltips或者模态框
2. updating阶段执行的生命周期函数
只有当props或者state改变是才会引起updating，进而组件会被重新渲染
componentWillReceiveProps()/UNSAFE_componentWillReceiveProps
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate()/UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
2.1 UNSAFE_componentWillReceiveProps(nextProps)
该方法会在mounted 组件收到新的props之前会被调用，如果需要根据新的props改变来更新state，最好比较新的nextProps和this.props是否不同，再调用setState方法更新state，这样做的原因是，父组件会引起子组件的re-render，从而导致在props没有改变的情况下调用了该方法，所以要保证只有当nextProps和this.props不同时，再更新state；通常情况this.setState不会触发该方法
在新的版本中，不推荐使用该生命周期方法，可以使用static getDerivedStateFromProps根据props的改变计算next state；可以使用componentDidUpdate执行由props改变带来的影响；甚至，有些情况下，你可以同时使用getDerivedStateFromProps和componentDidUpdate方法
2.2 shouldComponentUpdate(nextProps, nextState)
该方法在收到new props或者new state之后，render之前被调用，默认该方法返回true，当返回false时，render方法将不会执行，但是返回false的情况下，不会影响到子组件在他们的state下的重新渲染
通常情况下，当返回false时，UNSAFE_componentWillUpdate(),render()和componentDidUpdate方法不会被执行；当发现组件渲染变慢时，可以将组件改为extends React.PureComponent，这个接口中实现了在shouldComponentUpdate方法中对于props和state浅层次的比较，用于判断是否需要重新渲染组件，可以提高效率，当然也可以自己在该方法中手写根据props和state判断是否需要渲染组件，官方并不推荐使用JSON.stringify()方法进行深层次的比较，这种方法非常低效并且存在很多问题
2.3 UNSAFE_componentWillUpdate(nextProps, nextState)
该方法在收到新的props或者state之后，render方法执行之前被调用；该方法不会再初始化渲染的时候被调用；该方法内不应该调用this.setState()或者dispatch a Redux action 从而引起组件在该方法之前被更新；如果需要在props改变时，更新state状态，应该使用getDerivedStateFromProps()方法；
注：该方法在shouldComponentUpdate方法返回false时并不会被触发
2.4 getSnapshotBeforeUpdate(prevProps, preState)
该方法在最近的渲染被传递到DOM之前被调用，可以准确的在元素改变之前，通过该方法获取当前的值（比如滚动的位置）等，该方法的返回值将作为componentDidUpdate()方法的第三个参数传递到方法内部使用；该方法必须和componentDidUpdate同时使用，不能单独存在；
在异步渲染中，"render"的生命周期函数（比如componentWillUpdate和render）和"提交"的生命周期函数（比如getSnapshotBeforeUpdate和componentDidUpdate）之前会存在延迟，因此类似改变屏幕宽度等操作在异步渲染过程中，如果在componentWillUpdate中取值，得到的值并不准确
2.5 componentDidUpdate(prevProps, prevState, snapshot)
该方法在更新发生之后被调用，第一次render的时候并不会被调用；可以通过该方法在组件更新后操作DOM，同样也是一个很好的发送网络请求的位置，当然这个的前提是，有对新的props和原来的props进行比较不同后再发送请求；同样的当shouldComponentUpdate方法返回false时，该方法不会被调用
3. unmounting阶段的生命周期函数
componentWillUnmount
4. error 处理函数
这个方法主要用于当在rendering，或者其他生命周期函数中或者子组件的构造函数中报错是捕捉错误信息
componentDidCatch()
本文基于React 16.4 官网翻译得
本文目的仅仅是为了个人查找阅读等提供方便
https://blog.csdn.net/zhouziyu2011/article/details/71425057
网友评论