React.v16版本中生命周期的使用及建议

在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用,下面是个人使用的一点建议和心得!

现在渲染有两个阶段:reconciliation 和 commit 。前者过程是可以被打断的,后者则不能有任何的暂停,会一直更新界面直到完成。

Reconciliation 阶段
  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
Commit 阶段
  • componentDidMount
  • omponentDidUpdate
  • componentWillUnmount

其实很好理解,看名字都知道will是即将,肯定能打断撒,举个例子,
componentWillReceiveProps,在使用的时候,你有没有遇到过,会执行两次或多次的bug?
所以v16中Reconciliation阶段建议除了shouldComponentUpdate以外其他的能不用就不要用。

V16生命周期使用建议

getDerivedStateFromProps 用于替换 componentWillReceiveProps ,该函数会在初始化和 update 时被调用,getSnapshotBeforeUpdate 用于替换 componentWillUpdate ,该函数会在 updateDOM 更新前被调用,用于读取最新的 DOM 数据。

class Fakin extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(nextProps)
  }
  getSnapshotBeforeUpdate(){
  }
}

需要注意的是getDerivedStateFromProps是静态方法,至于shouldComponentUpdate目前还没得办法,优化组件的时候必须用到这个!