Fork me on GitHub

React生命周期简单梳理

发表于 | 分类于 | 评论：

前言

更清楚地了解React的生命周期能够让自己更清晰地知道组件中代码的执行机制，从而可以让我们优化代码性能和更快排查出一些代码执行问题。

总的来说，React生命周期大体上可以分为三个阶段：挂载阶段（Mount）、更新阶段（Update）、卸载阶段（Unmount）。接下来我就将分别就这几个阶段所包含的生命周期钩子详细说明。

React生命周期

先引用一个流程图了解一下各生命周期钩子的执行顺序，目前最新版本（v16.8.6）已经对一些钩子做了一些修改，但大体的流程还是没变的。以下的组件生命周期分析都是基于ES6的class组件。

image

挂载阶段（Mount）

挂载阶段主要进行如下操作：

  • constructor()

    这里面可以设置组件默认属性，设置组件的初始化状态，对应图中就是：

    1
    2
    3
    static defaultProps = {
      name: 'wan'
    };

  • static getDerivedStateFromProps()

    getDerivedStateFromProps会在render方法之前调用，无论是初始挂载还是更新时都会调用，这是一个高级功能，慎用

  • render()

    渲染函数，唯一不能省略的函数，返回的就是页面的渲染DOM节点。

  • componentDidMount()

    组件已经被渲染到页面中后触发：此时页面中有了真正的DOM的元素，可以进行DOM相关的操作

更新阶段（Update）

当组件挂载到DOM树之后，当props/state被修改时会导致组件进行更新操作，更新过程会触发以下生命周期函数：

  • static getDerivedStateFromProps()
  • shouldComponentUpdate(nextProps, nextState)

    返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

  • render()
  • getSnapshotBeforeUpdate()

    在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）

  • componentDidUpdate()

    会在更新后会被立即调用。首次渲染不会执行此方法

卸载阶段（Unmount）

当组件从 DOM 中移除时会调用如下方法：

  • componentWillUnmount()

    可以做一些取消事件订阅和取消计时器的操作

参考