生命周期图

React的生命周期 - 图1

常用的生命周期方法

render()

  1. render()
  2. render()方法是class组件中唯一必须实现的方法。
  3. 当render（）被调用时，他会检查this.props和this.state的变化并返回以下类型之一：
  4.   React元素。通常通过JSX创建。例如<div/>会被React渲染为DOM节点，<MyComponent />会被React渲染为自定义组件。
  5.   数组或fragments。使得render方法可以返回多个元素。
  6.   Portals。可以渲染子节点到不同的DOM子树中。
  7.   字符串或数值类型。他们在DOM中会被渲染为文本节点。
  8.   布尔类型或null。什么都不渲染。

constructor（）

  1. constructor(props)
  2. 如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数。
  3. 在React组件挂载之前，会调用它的构造函数。在为React.Component子类实现构造函数时，应在其他语句之前调用super(props)。否则，this.props在构造函数中可能会出现未定义的BUG
  4. 注意：避免在constructor中直接将props的值赋给state中的属性，这样做毫无必要，同时还会产生props更新时，state中相应的值并不会改变，因为props的值仅仅是作为初始值赋给了state。

componentDidMount()

  1. componentDidMount()
  2. componentDidMount()会在组建挂载后（插入DOM树中）立即调用。相当于vue的mounted
  3. 这里是放置网络请求的好地方，在挂载结束前进行网络请求的话，可能会被Fiber算法碎片化，导致请求被半路拦截，从而导致多次请求产生。所以为了避免Fiber算法的影响，我们最好在组件挂载完成后再进行网络请求。
  4. 我们也可以在componentDidMount()里直接调用setState()。他将触发额外的渲染，但是此渲染会发生在浏览器更新页面之前，这样可以保证用户不会看见中间状态

componentDidUpdate()

  1. componentDidUpdate(prevProps, prevState, snapshot)
  2. componentDidUpdate()会在更新后立即被调用，但是首次渲染不会执行此方法
  3. 在componentDidUpdate()中调用setState注意要将它包裹在一个条件语句中，否则有可能会造成死循环。

componentWillUnmount()

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

不常用的生命周期方法

shouldComponentUpdate()

  1. shouldComponentUpdate(nextProps, nextState)
  2. 根据shouldComponentUpdate()的返回值，判断React组件输出是否受当前state或props更改影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
  3. 当props或state发生变化时，shouldComponentUpdate()会在渲染发生之前被调用

static getDerivedStateFromProps()

  1. static getDerivedStateFromProps(props, state)
  2. getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
  3. 此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。例如，实现 <Transition> 组件可能很方便，该组件会比较当前组件与下一组件，以决定针对哪些组件进行转场动画。

getSnapshotBeforeUpdate()

  1. getSnapshotBeforeUpdate(prevProps, prevState)
  2. getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
  3. 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
  4. 应返回 snapshot 的值（或 null）。

Error boundaries

  1. Error boundaries 是 React 组件，它会在其子组件树中的任何位置捕获 JavaScript 错误，并记录这些错误，展示降级 UI 而不是崩溃的组件树。Error boundaries 组件会捕获在渲染期间，在生命周期方法以及其整个树的构造函数中发生的错误
  2. 如果 class 组件定义了生命周期方法 static getDerivedStateFromError() 或 componentDidCatch() 中的任何一个（或两者），它就成为了 Error boundaries。通过生命周期更新 state 可让组件捕获树中未处理的 JavaScript 错误并展示降级 UI。
  3. 仅使用 Error boundaries 组件来从意外异常中恢复的情况；不要将它们用于流程控制。

static getDerivedStateFromError()

  1. static getDerivedStateFromError(error)
  2. 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state

componentDidCatch()

  1. componentDidCatch(error, info)
  2. 此生命周期在后代组件抛出错误后被调用。 它接收两个参数：
  3.     error —— 抛出的错误。
  4.     info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
  5. componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况。

组件的生命周期

Mounting(挂载)：已插入真实DOM

  1. constructor():在React组件挂载之前，会调用它的构造函数。
  2. getDerivedStateFromProps():在调用render方法之前调用，并且在初始阶段及后续更新时都会被调用。
  3. render():render()方法是class组件中唯一必须实现的方法。
  4. componentDidMount():在组件挂载后（插入DOM树中）立即调用。

Updating(更新)：正在被重新渲染

  1. 每当组件的 state 或 props 发生变化时，组件就会更新。
  3. 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
  4.     getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
  5.     shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
  6.     render(): render() 方法是 class 组件中唯一必须实现的方法。
  7.     getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
  8.     componentDidUpdate(): 在更新后会被立即调用。

Unmounting(卸载)：已移出真实DOM

  1. 当组件从 DOM 中移除时会调用如下方法：
  3.     componentWillUnmount(): 在组件卸载及销毁之前直接调用。