react 生命周期

生命周期详见 react v16.12 官网

可以生命周期图谱作为速查表

挂载

当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

getDerivedStateFromProps 是 16.3 新加入的 API

componentWillMount() 即将过时,不要使用。

componentWillMount() 的代码大多数情况,尤其是费时的,异步的操作都可以直接移去 componentDidMount()。少部分情况如初始化状态设置,可以移去 constructor()。

componentWillMount() 有使用陷阱,比方说在此函数里获取数据,想避免首页白屏或者空渲染状态。但是行不通的,因为 React 总是在 componentWillMount 之后立即执行 render,不会管 componentWillMount 内是否执行完毕。所以解决思路应该就是初始化时设好骨架屏或者显示好占位元素,然后在 componentDidMount 里执行异步获取数据操作。

并且如果有订阅事件的需要也放到 componentDidMount ,因为在 async render 的情况下,componentWillMount 会触发多次。

更新

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

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

componentWillUpdate() 与 componentWillReceiveProps() 即将过时,不要使用。

注意,componentWillReceiveProps() 过时,但是替代它可以使用下面的做法,相当于 componentWillReceiveProps() 拆分成两处,使派生状态更容易预测。

static getDerivedStateFromProps(nextProps, prevState) {
  // 该方法内禁止访问 this
  if (nextProps.defaultValue !== prevState.something) {
    // 通过对比nextProps和prevState,返回一个用于更新状态的对象
    return { something: nextProps.defaultValue };
  }
  // 不需要更新状态,返回null
  return null;
}

// 并且仍想通过更新时的 this.props 做一些有副作用的事情,可以使用 componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot) {
  if(this.props.email){
    // 例如dispatch action,或者做动画那样的副作用的事情。
  }
}

卸载

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

  • componentWillUnmount()

错误处理

当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:

  • static getDerivedStateFromError()
  • componentDidCatch()
posted @ 2020-03-18 18:51  Ever-Lose  阅读(231)  评论(0编辑  收藏  举报