04-React生命周期钩子（15、16及未来版本）

缺乏、安全感 2021-07-25 21:02 335阅读 0赞

前言：React中组件有生命周期，在16.3版本之后，我们把生命周期分为四个阶段：初始化、运行中、销毁和错误处理。值得注意的是，生命周期的钩子一定不要写成箭头函数！

一、15版本的钩子  
getDefaultProps() （16版本已弃用）  
getInitialState() （16版本已弃用）  
componentWillMount()  
render()  
componentDidMount()  
componentWillReceiveProps()  
shouldComponentUpdate()  
componentWillUpdate()  
componentDidUpdate()  
componentWillMount()  
流程详见下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70]

二、16版本的钩子  
constructor() （较15版本新增）  
componentWillMount() （17版本已弃用）  
render()  
componentDidMount()  
componentWillReceiveProps() （17版本已弃用）  
shouldComponentUpdate()  
componentWillUpdate() （17版本已弃用）  
componentDidUpdate()  
componentWillUnMount()  
componentDidCatch()  
流程详见下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 1]

三、17版本（未来）的钩子  
constructor()  
static getDerivedStateFromProps() （较16版本新增）  
render()  
componentDidMount()  
shouldComponentUpdate()  
getSnapshotBeforeUpdate() （较16版本新增）  
componentDidUpdate()  
componentWillUnmount()  
getDerivedStateFromError()  
流程详见下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 2]

四、各生命周期钩子详解  
1、constructor(props)

用来做属性的继承、状态的定义。（继承父组件外部传递来的属性，然后绑定在当前组件的props属性上）  
官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()  
2、static getDerivedStateFromProps(nextProps, prevState)

在组件实例化后，和接受新的props后被调用  
必须返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新  
3、componentWillMount()

官方都建议使用componentDidMount()代替  
4、render()

将JSX转换为虚拟对象模型  
解析this.props和this.state  
5、componentDidMount()

做数据修改、数据请求  
可在这个钩子里初始化第三方的DOM库（只有到这里才能获取真实的DOM）  
6、componentWillReceiveProps()

官方建议使用getDerivedStateFromProps函数代替  
当组件挂载后，接收到新的props后会被调用  
如果需要更新state来响应props的更改，则可以进行this.props和nextProps的比较，并在此钩子中使用this.setState  
用来做监听  
7、shouldComponentUpdate(nextProps, nextState)

决定组件是否更新渲染  
默认返回true，即更新  
返回false不会阻止子组件在state更改时重新渲染  
是React性能优化的一种方案  
8、componentWillUpdate()

组件更新前的准备工作，即生成虚拟DOM  
不能在这里使用this.setState()，会造成栈溢出  
9、getSnapshotBeforeUpdate()

在render()后的输出被渲染到DOM之前被调用  
使组件能够在它们被潜在更改之前捕获当前值（如滚动位置）  
返回的任何值都将作为参数传递给componentDidUpdate()  
10、componentDidUpdate(prevProps, prevState, snapshot)

组件更新结束，可以做DOM操作  
如果组件实现getSnapshotBeforeUpdate()生命周期，则它返回的值将作为第三个“快照”参数传递过去。否则，这个参数是undefined。  
不能在这里使用this.setState()，会造成栈溢出  
11、componentWillUnmount()

在此方法中执行任何必要的清理，例如使定时器无效，或清理在componentDidMount中创建的任何监听  
内部销毁用ReactDOM.unmountComponentAtNode()，会销毁全部组件  
外部销毁用开关来控制组件的创建与销毁  
12、componentDidCatch(error, info)

可以在其子组件树中的任何位置捕获JavaScript错误  
记录这些错误并显示回退UI，而不是崩溃的组件树  
添加了context后会多一个钩子componentWillReact () \{\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70]: /images/20210725/0e35a376b5e94b339bb4379b8ad014e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 1]: /images/20210725/d0508fc72de14fd3894f63ed928fbfe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ppeWVyNjY2_size_16_color_FFFFFF_t_70 2]: /images/20210725/59cec85e467b41788aa6fe351d6dbcac.png