React 生命周期这一块,我觉得有点乱,官方文档也看得懵逼,因为它一直有改动说明,这里我花了不少时间整理了一下,希望对你有帮助。
本文 React 用例版本:v17.0.2
旧的生命周期
旧的生命周期不是说都不能用了,这些是之前定义的完整的生命周期,有个别生命周期在以后的新版本中可能不会再用到,后面会说到。另外我这里把 React 组件中的 constructor
和 render
也可以看作生命周期中的一部分。
-
初始阶段,首次渲染,依次触发以下钩子:
- constructor
- componentWillMount(组件即将挂载)
- render
- componentDidMount(组件完成挂载)
-
更新阶段,
setState
触发或者父组件render
:- shouldComponentUpdate(是否更新,返回布尔值,默认返回 true)
- componentWillUpdate(组件即将更新)
- render
- componentDidUpdate(组件完成更新)
-
卸载组件,触发 ReactDOM.unmountComponentAtNode():
- componentWillUnmount(组件即将卸载,一般在这里做一些收尾的事)
以上是 React 生命周期的主要三个阶段,其中更新阶段还有两个注意的点:
第一个,如果组件是强制更新的,则不会触发 shouldComponentUpdate
,强制更新组件使用 this.forceUpdate
() 方法;
第二个,如果是父组件触发子组件更新,子组件会先触发一个 componentWillReceiveProps
的生命周期。在这个生命周期里可以获取到旧的 props
,可以使用 this.setState()
来更新状态,且不会重复触发 render
新的生命周期
所谓新的生命周期,是在之前的基础上,移除了三个生命周期,即 componentWillMount
,componentWillUpdate
和 componentWillReceiveProps
。然后添加了两个新的生命周期,即getDerivedStateFromProps
和 getSnapshotBeforeUpdate
。
要移除的三个生命周期在目前版本(17.0.2)中还没有被移除,可以直接使用,也可以加前缀使用,即 UNSAFE_componentWillMount
,UNSAFE_componentWillUpdate
和 UNSAFE_componentWillReceiveProps
。
相关内容可以参考这一篇官方文档:过时的生命周期方法
对于新增的两个生命周期钩子,并不常用,可以参考文档 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。
现在新的三个阶段如下:
-
初始阶段,首次渲染,依次触发以下钩子:
- constructor
- getDerivedStateFromProps
- render
- componentDidMount(组件完成挂载)
-
更新阶段,setState 触发或者父组件 render:
- getDerivedStateFromProps
- shouldComponentUpdate(是否更新,返回布尔值,默认返回 true)
- render
- getSnapshotBeforeUpdate
- componentDidUpdate(组件完成更新)
-
卸载组件,触发 ReactDOM.unmountComponentAtNode():
- componentWillUnmount(组件即将卸载,一般在这里做一些收尾的事)
结尾
如有错误,欢迎指出。