• 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()
  • 相关阅读:
    ES6/ES2015核心内容 import export
    JavaScript 标准参考教程(alpha) 阮一峰
    NPM 学习笔记整理
    (尚026)Vue_案例_动态初始化显示(尚025)
    (尚025)Vue_案例_静态组件
    (尚024)Vue_案例_交互删除
    (尚023)Vue_案例_交互添加
    (尚022)Vue案例_初始化显示(十分详细!!!)
    (尚021)Vue_eslint编码规范检查
    (尚020)Vue打包发布项目
  • 原文地址:https://www.cnblogs.com/everlose/p/12519382.html
Copyright © 2020-2023  润新知