React 组件完整生命周期方法介绍

组件生命周期

生命周期图谱

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

注意：下述生命周期方法即将过时，应避免使用它们：

• componentWillMount()

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

注意：下述生命周期方法即将过时，应避免使用它们：

• componentWillUpdate()
• componentWillReceiveProps()

卸载

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

• componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

常用的生命周期方法

render()

render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

如需与浏览器进行交互，需在 componentDidMount() 或其他生命周期方法中执行你的操作，保持 render() 为纯函数。

注意：如果 shouldComponentUpdate() 返回 false，则不会调用 render()

constructor()

constructor(props)

如果不初始化 state 或不进行方法绑定则不需要为 React 组件实现构造函数。

通常，在 React 中，构造蛤属仅用于以下两种情况：

• 通过给 this.state 复制对象来初始化内部state
• 为事件处理函数绑定实例

要避免在构造函数中引入任何副作用或订阅。如有需要，应在 componentDidMount() 中进行操作。

componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。此处是网络请求获取数据的好地方。

如果在此处添加了订阅，不要忘记在 componentWillUnmount() 里取消订阅。

componentDidUpdate()

constructor(preProps, prevState, snapshot)

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

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props未发生变化时，则不会执行网络请求）

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）
  if(this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID)
  }
}

如果组件实现了 getSnapshotBeforeUpdate() 生命周期（不常用），则它的返回值将作为 componentDidUpdate() 的第三个参数 "snapshot" 参数传递。否则此参数将为 undefined。

注意：如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

componentWillUnmount() 中不应调用 setState(), 因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

不常用的生命周期方法

shouldComponentUpdate()

shouldComponentUpdate(nextProps, prevState)

此方法仅作为性能优化的方式而存在。当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。默认返回true。首次渲染或使用 forceUpdate() 时不会调用该方法。

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初试挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

此方法适用于 state 的值在任何时候都取决于 props。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此声明周期的任何返回值都将作为参数传递给 componentDidUpdate()

static getDerivedStateFromError()

static getDerivedStateFromError(error)

此生命周期会在后代组件抛出错误后被调用。它将抛出的错位作为参数，并返回一个值以更新 state，让组件捕获树中未处理的 JavaScript 错误并展示降级 UI。

componentDidCatch(error, info)

此生命周期在后代组件抛出错误后被调用。它接收两个参数：

1. error - 抛出的错误
2. info - 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

componentDidCatch() 会在"提交"阶段被调用，因此允许执行副作用。

过时的生命周期方法

这些方法仍然有效，但是不建议在新代码中使用它们。

• componentWillMount()
• componentWillReceiveProps()
• componentWillUpdate()