React 的生命周期笔记

react 的生命周期办法

• 挂载

  • constructor()
  • static getDerivedStateFromProps(props, state)
  • render()
  • componentDidMount()

• 更新

  • static getDerivedStateFromProps(props, state)
  • shouldComponentUpdate(nextProps, nextState)
  • render()
  • getSnapshotBeforeUpdate(prevProps, prevState)
  • componentDidUpdate()

• 卸载

  • componentWillUnmount()

其中这些办法行将过期，应该防止应用他们

• UNSAFE_componentWillMount()
• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

具体的流程图如下:

地址是这个：https://projects.wojtekmaj.pl…

static getDerivedStateFromProps(props, state)

这是个新生命周期办法，须要留神三点：

• 第一个重点是最特地的一点：getDerivedStateFromProps 是一个静态方法 。静态方法不依赖组件实例而存在， 因而你在这个办法外部是拜访不到 this 的。若你偏要尝试这样做，必然报错。
• 该办法能够接管两个参数：props 和 state，它们别离代表 以后组件接管到的来自父组件的 props 和 以后组件本身的 state。
• getDerivedStateFromProps 须要一个对象格局的返回值。且返回值是不可或缺的，因为 React 须要用这个返回值来更新（派生）组件的 state。因而当你的确不存在“应用 props 派生 state”这个需要的时候，最好是间接省略掉这个生命周期办法的编写，否则肯定记得给它 return 一个 null。

留神，getDerivedStateFromProps 办法对 state 的更新动作并非“笼罩”式的更新，而是针对某个属性的定向更新 。
比方，在 getDerivedStateFromProps 办法里返回：

{num: props.text}

只会更新 state 的 num 属性，并不会笼罩生个 state。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate 的返回值会作为第三个参数给到 componentDidUpdate。它的执行机会是在 render 办法之后，实在 DOM 更新之前。在这个阶段里，咱们能够同时获取到更新前的实在 DOM 和更新前后的 state&props 信息。从生命周期图中能够看到，getSnapshotBeforeUpdate 执行后才会真正更新 DOM，也就是说在如果在这个办法获取 DOM，拿到的 DOM 还是未更新的旧的 DOM。

componentDidUpdate(prevProps, prevState, valueFromSnapshot)，第三个参数就是 getSnapshotBeforeUpdate 的返回值。getSnapshotBeforeUpdate 要想发挥作用，离不开 componentDidUpdate 的配合。

组件销毁的常见起因有以下两个

• 组件在父组件中被移除了：这种状况绝对比拟直观，对应的就是咱们上图形容的这个过程。
• 组件中设置了 key 属性，父组件在 render 的过程中，发现 key 值和上一次不统一，那么这个组件就会被干掉。

新生命周期背地的思考

在 Fiber 机制下，render 阶段是容许暂停、终止和重启的。当一个工作执行到一半被打断后，下一次渲染线程抢回主动权时，这个工作被重启的模式是“反复执行一遍整个工作”而非“接着上次执行到的那行代码往下走”。这就导致 render 阶段的生命周期都是有可能被反复执行的。

带着这个论断，咱们再来看看 React 16 打算废除的是哪些生命周期：

• componentWillMount；
• componentWillUpdate；
• componentWillReceiveProps。

这些生命周期的共性，就是它们都处于 render 阶段，都可能反复被执行，而且因为这些 API 长年被滥用，它们在反复执行的过程中都存在着不可小觑的危险。

官网文档对 React.Component 中的生命周期的解说

官网文档对于需不需要应用派生 state,getDerivedStateFromProps 办法相干的解说