乐趣区

关于前端: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 办法相干的解说

退出移动版