重学 React 之生命周期

564 阅读2分钟

重学 React 之基础认知
重学 React 之三大属性

React 生命周期这一块,我觉得有点乱,官方文档也看得懵逼,因为它一直有改动说明,这里我花了不少时间整理了一下,希望对你有帮助。

本文 React 用例版本:v17.0.2

旧的生命周期

旧的生命周期不是说都不能用了,这些是之前定义的完整的生命周期,有个别生命周期在以后的新版本中可能不会再用到,后面会说到。另外我这里把 React 组件中的 constructorrender 也可以看作生命周期中的一部分。

  1. 初始阶段,首次渲染,依次触发以下钩子:

    • constructor
    • componentWillMount(组件即将挂载)
    • render
    • componentDidMount(组件完成挂载)
  2. 更新阶段,setState 触发或者父组件 render

    • shouldComponentUpdate(是否更新,返回布尔值,默认返回 true)
    • componentWillUpdate(组件即将更新)
    • render
    • componentDidUpdate(组件完成更新)
  3. 卸载组件,触发 ReactDOM.unmountComponentAtNode():

    • componentWillUnmount(组件即将卸载,一般在这里做一些收尾的事)

以上是 React 生命周期的主要三个阶段,其中更新阶段还有两个注意的点:

第一个,如果组件是强制更新的,则不会触发 shouldComponentUpdate ,强制更新组件使用 this.forceUpdate() 方法;

第二个,如果是父组件触发子组件更新,子组件会先触发一个 componentWillReceiveProps 的生命周期。在这个生命周期里可以获取到旧的 props,可以使用 this.setState() 来更新状态,且不会重复触发 render

新的生命周期

所谓新的生命周期,是在之前的基础上,移除了三个生命周期,即 componentWillMountcomponentWillUpdatecomponentWillReceiveProps。然后添加了两个新的生命周期,即getDerivedStateFromPropsgetSnapshotBeforeUpdate

要移除的三个生命周期在目前版本(17.0.2)中还没有被移除,可以直接使用,也可以加前缀使用,即 UNSAFE_componentWillMountUNSAFE_componentWillUpdateUNSAFE_componentWillReceiveProps

相关内容可以参考这一篇官方文档:过时的生命周期方法

对于新增的两个生命周期钩子,并不常用,可以参考文档 getDerivedStateFromProps 和 getSnapshotBeforeUpdate

现在新的三个阶段如下:

  1. 初始阶段,首次渲染,依次触发以下钩子:

    • constructor
    • getDerivedStateFromProps
    • render
    • componentDidMount(组件完成挂载)
  2. 更新阶段,setState 触发或者父组件 render:

    • getDerivedStateFromProps
    • shouldComponentUpdate(是否更新,返回布尔值,默认返回 true)
    • render
    • getSnapshotBeforeUpdate
    • componentDidUpdate(组件完成更新)
  3. 卸载组件,触发 ReactDOM.unmountComponentAtNode():

    • componentWillUnmount(组件即将卸载,一般在这里做一些收尾的事)

结尾

如有错误,欢迎指出。