React组件生命周期

完整生命周期

每个React组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。React的生命周期主要包括3大部分，挂载、更新和卸载。在整个生命周期中，包括了组件异常处理。

1.挂载

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

1. constructor()：给 this.state 赋值对象来初始化内部 state，为事件处理函数绑定实例
2. static getDerivedStateFromProps()：它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。当state需要从props初始化时使用，但是尽量不要使用，因为维护两者一致性会增加时间复杂度。每次render都会调用，典型的应用场景：表单控件获取默认值。
3. render()：render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
   
   React 元素：通常通过 JSX 创建。例如，会被 React 渲染为 DOM 节点，会被 React 渲染为自定义组件，无论是 还是 均为 React 元素。
   
   数组或 fragments： 使得 render 方法可以返回多个元素。欲了解更多详细信息，请参阅 fragments 文档。
   
   Portals：可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档
   
   字符串或数值类型：它们在 DOM 中会被渲染为文本节点
   
   布尔类型或 null：什么都不渲染。（主要用于支持返回 test && 的模式，其中 test 为布尔类型。)
4. componentDidMount():会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。该函数在组件生命中期中只执行一次。

2.更新

1. shouldComponentUpdate()：与组件挂载相比，整个过程过了两部分，当组件的state、props发生变化或调用forceUpda()强制更新时，会调用shouldComponentUpdate()，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，都应该遵循默认行为。典型场景：组件性能优化。

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

3. componentDidUpdate()：会在更新后会被立即调用。首次渲染不会执行此方法。当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。常用应用场景：页面需要根据props变化重新获取数据。

3.卸载

componentWillUnmount()：会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。