React v16.9 中unsafe的生命周期函数

https://zh-hans.reactjs.org/b...

Unsafe的生命周期

• componentWillMount → UNSAFE_componentWillMount

  • 没有用过,不描述

• componentWillReceiveProps → UNSAFE_componentWillReceiveProps

  • 原因：

    • 在一次渲染周期内,props多次变化,造成该函数重复调用。
    • 父组件触发子组件重新渲染,即使props未变化，依然会调用该函数

  • 方案

    1. 在render中处理最终需要的渲染相关数据

       • componentShouldUpdate 仅处理 props 相关
       • 使用memoize

    2. 使用getDerivedStateFromProps,仅会在渲染前调用，返回值应用于state,不通过setState队列。

       • packagesreact-domsrcserverReactPartialRenderer.js

• componentWillUpdate → UNSAFE_componentWillUpdate

  • 原因:

    • 设计用于保存组件在渲染前的状态,比如读取dom信息中的滚动值等。
    • 但实际中,可能会调用setState或者触发react-redux中的action

  • 方案

    • 使用getSnapshotBeforeUpdate获取dom信息，这是一个静态方法。无法使用setState等方法。