React 生命周期(Lifecycle)

• 本文将对 React 的16.4版本中，生命周期中的三大阶段：挂载、更新、卸载的执行场景和使用的使用场景进行简要的概述，更多关于 React 生命周期的最新使用，请查看官网

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

  1. constructor()

     • 执行场景

       • 在 React 组件挂载之前，会调用它的构造函数。只会执行一次

     • 使用场景

       • 通过给 this.state 赋值对象来初始化组件内部的 state，或为事件处理函数绑定实例

     • 注意事项

       • 在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

       • 在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，则直接在构造函数中为 this.state 赋值初始 state

  2. static getDerivedStateFromProps()

     • 执行场景

       • 初始化阶段执行在 constructor() 方法之后，在 render() 方法之前调用，并且在后续更新时都会被调用。

     • 使用场景

       • 从属性里面获取派生状态，在函数的挂载阶段和更新阶段都会执行

     • 注意事项

       • static getDerivedStateFromProps(props,state) 的 state 的值在任何时候都取决于 props

       • 它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

  3. render()

     • 执行场景

       • 初始化阶段执行在 constructor() 方法之后，并且在后续更新时都会被调用。

     • 使用场景

       • render() 方法是 class 组件中唯一必须实现的方法。

       • 遵循 JSX 语法糖

     • 注意事项

       • 当 render 被调用时，当返回 布尔类型或 null 或 undefined，什么都不渲染。

  4. componentDidMount()

     • 执行场景

       • 在render()方法之后，只能执行一次

     • 使用场景

       • componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。

       • 可以在 componentDidMount() 里直接调用 setState()。

       • 发起 ajax 请求，实例化第三方插件、初始化定时器的绑定

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

  1. static getDerivedStateFromProps()

     • 执行场景

       • 当 props 或 state 发生变化时，会在调用 render 方法之前调用。

     • 使用场景

       • 从属性里面获取派生状态，在函数的挂载阶段和更新阶段都会执行

     • 注意事项

       • static getDerivedStateFromProps(props,state) 的 state 的值在任何时候都取决于 props

       • 它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

  2. shouldComponentUpdate()

     • 执行场景

       • 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。

     • 使用场景

       • 根据 shouldComponentUpdate(nextProps,nextState) 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。

     • 注意事项事项

       • shouldComponentUpdate() 方法仅作为性能优化的方式（优化 react 的 render 的渲染次数）而存在，或考虑使用内置的 PureComponent 组件

       • 针对无状态组件，则使用 React.memo(组件) 来进行性能提升

       • 首次渲染或使用 forceUpdate() 时不会调用该方法。

       • 这个方法如果返回 false，那么 props 或 state 发生改变的时候会阻止子组件发生重新渲染

       • 如果 shouldComponentUpdate(nextProps, nextState) 返回 false，则不会调用 UNSAFE_componentWillUpdate(nextProps, nextState)，render() 和 componentDidUpdate()。

  3. render()

     • 执行场景

       • 当 props 或 state 发生变化时

     • 使用场景

       • 当 props 或 state 发生变化时

     • 注意事项

       • 当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回。

  4. getSnapshotBeforeUpdate()

     • 执行场景

       • 当 props 或 state 发生变化后

     • 使用场景

       • 该方法不会再组件初始化时触发，使用这个方法可以对组件中的DOM进行操作

       • getSnapshotBeforeUpdate(prevProps, prevState, snapshot) 的任何返回值将作为参数传递给 componentDidUpdate()，应返回 snapshot 的值（或 null）。

     • 注意事项

       • 如果 shouldComponentUpdate(nextProps, nextState) 返回false, 那么 componentDidUpdate(prevProps, prevState) 不会被触发

       • 该方法不能调用 this.setState({})

  5. componentDidUpdate()

     • 执行场景

       • 在 render() 方法之后

     • 使用场景

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

     • 注意事项

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

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

       • 当 ajax 请求的数据改变引发的真实dom结构已经挂载完毕了，可以通过使用 componentDidUpdate() 实例化第三方插件

• 卸载阶段 当组件从 DOM 中移除时会调用如下方法：

  1. componentWillUnmount()

     • 执行场景

       • 把组件从 dom 中移除的时候

     • 使用场景

       • componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除定时器，取消 ajax，卸载实例化第三方的一些插件

     • 注意事项

       • 通过引入 react-dom，当 ReactDOM.unmountComponentAtNode() 调用的时候，就执行 componentWillUnmount()

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