react生命周期详解

react生命周期，总体分为三个阶段：

• 挂载
• 渲染
• 卸载

1.挂载

• constructor()

  1.用于初始化state数据。
  2.在使用this之前，还必须在该函数中调用super()方法。

• componentWillMount()

  该生命周期一般用的少，此时，dom还未挂载。

• componentDidMount()

  1.在render()方法之后调用。DOM已经挂载。
  2.该方法中，可以发送ajax请求，调用setState()，更新state数据，此时，会触发render()方法进行二次渲染。
  3.若不是重新插入dom，该方法仅调用一次。

2.卸载

• componentWillUnmount ()

  在此处完成组件的卸载和数据的销毁。
  1.clear你在组件中所有的setTimeout,setInterval
  2.移除所有组件中的监听 removeEventListener

3.渲染

• getDerivedStateFromProps(nextProps, prevState)

  1.替换componentWillReceiveProps()生命周期方法。（v16.4）
  2.该方法在组件每次渲染时，都会被调用。意味着即使你的props没有任何变化，而是父state发生了变化，导致子组件发生了re-render，这个生命周期函数依然会被调用。
  3.仅在render()方法之前调用。
  4.用于props的改变映射到state中。返回值：返回一个更新后的state对象。或者返回null，表明不需更新state。

• shouldComponentUpdate(nextProps,nextState)

  1.一般用于性能优化。
  2.控制组件的重新渲染，当组件的state发生变化时，组件默认重新渲染。该方法默认返回true，可在该方法中return false阻止组件的重新渲染。
  3.因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

• getSnapshotBeforeUpdate(prevProps, prevState) （v16.4）

  1.替换componentWillUpdate。
  2.在dom更新之前被调用，
  3.返回值会被传给componentDidUpdate()钩子。

• componentDidUpdate(prevProps,prevState)

  1.组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

• render()

  render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

来源：CSDN

作者：选择远方

链接：https://blog.csdn.net/qq_40713392/article/details/104279638