React的生命周期笔记

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方法相关的讲解