React 生命周期有哪些不同阶段？每个阶段对应的方法是？

一、是什么

React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程

二、不同的阶段

创建阶段

• constructor

  1. 实例过程中自动调用的方法，在方法内部通过super关键字获取来自父组件的props。

  2. 在该方法中，通常的操作为初始化state状态或者在this上挂载方法

• getDerivedStateFromProps

  1. 该方法是新增的生命周期方法，是一个静态的方法，因此不能访问到组件的实例。
  2. 该方法需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新

• render

  1. 类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性。

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

  3. 如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render()为纯函数，可以使组件更容易思考。

  注意： 不要在 render 里面 setState, 否则会触发死循环导致内存崩溃

• componentDidMount

  1. 组件挂载到真实DOM节点后执行，其在render方法之后执行

  2. 此方法多用于执行一些数据获取，事件监听等操作

更新阶段

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

• static getDerivedStateFromProps()

  同上一样

• shouldComponentUpdate()

  1. 用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true

  2. 执行时机：到新的props或者state时都会调用，通过返回true或者false告知组件更新与否

  3. 一般情况，不建议在该周期方法中进行深层比较，会影响效率

  4. 此方法仅作为性能优化的方式而存在。

  5. 同时也不能调用setState，否则会导致无限循环调用更新。

• render()

  同上一样

• getSnapshotBeforeUpdate()

  1. 该周期函数在render后执行，执行之时DOM元素还没有被更新
  2. 该方法返回的一个Snapshot值，作为componentDidUpdate第三个参数传入
  3. 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

• componentDidUpdate()

  componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
  执行时机：组件更新结束后触发
  在该方法中，可以根据前后的props和state的变化做相应的操作，如获取数据，修改

卸载阶段

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

• componentWillUnmount()

  1. 此方法用于组件卸载前，清理一些注册是监听事件，或者取消订阅的网络请求等

  2. 一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建

三、总结

旧版生命周期如图：

新版生命周期如图：