Skip to main content

生命周期

初始化阶段​

  • componentWillMount: render之前最后一次修改状态的机会 UNSAFE_componentWillMount
  • render: 只能访问this.props和this.state , 不允许修改状态和Dom输出
  • componentDidMount: 成功render并渲染完成真实Dom之后触发, 可以修改Dom

UNSAFE_componentWillMount,UNSAFE_componentWillUpdate: 16.2之前需要创建虚拟dom树,新的虚拟dom树对比老的虚拟dom树 这个操作实在浏览器渲染主线程中执行的,而且是同步的, 如果dom树非常庞大, 会造成浏览器的假死, 卡顿.

16.2之后React Fiber技术优化的虚拟dom的diff算法,把创建,和渲染碎片化,按优先级执行, 低优先级可以被打断执行, 先执行高优先级(render), 再重新执行低优先级(UNSAFE_componentWillMount,UNSAFE_componentWillUpdate) 所以低优先级的可能会执行多次

运行中阶段​

  • componentWillReceiveProps: 父组件修改属性触发
  • shouldComponentUpdate: 返回false会阻止render调用
  • componentWillUpdate: 不能修改属性和状态
  • render: 只能访问this.props和this.state , 不允许修改状态和Dom输出
  • componentDidUpdate: 可以修改dom

销毁阶段​

  • componentWillUnmount: 在删除组件之前清理操作, 比如计时器和事件监听

新生命周期​

  1. getDerivedStateFromProps

    • 用于替代 componentWillReceiveProps 和 componentWillMount
    • 组件初始化或更新时将props映射到state
    • 返回值与 state 合并后可以做用为 shouldcomponentupdate 生命周期的第二个参数newstate

  2. getSnapshotBeforeUpdate

    • 配合componentDidUpdate使用, 可以dom更新之前获取dom元素的快照, return 后会传递给componentDidUpdate的第三个参数
    getSnapshotBeforeUpdate(prevProps,preState){
        const style = getComputedStyle(this.node)

        // 传递更新前的元素位置
        return {
            cx:style.cx,
            cy:style.cy
        }
        }
        componentDidUpdate(prevProps, prevState, snapshot){
        // 获取元素绘制之前的位置
        console.log(snapshot)
    }