React过时的生命周期 2019-09-23

2019-09-26 本文已影响0人讨厌西红柿

最近调试React项目的时候，控制台老是输出一些警告信息，比如这样的

1569207926863.jpg
警告componentWillMount、componentWillReceiveProps已被重命名，并且原生命周期将在React 17.x版本失效。而其提供的链接，不翻墙也打不开。

关于即将过时的生命周期，总共有三个componentWillMount、componentWillReceiveProps以及componentWillUpdate，目前来说（React 16.9.0），这些方法仍然有效，但不建议在新代码中使用它们。

其实在16.3版本，就已经提供了相应的重命名生命周期，以UNSAFE_开头，旧的生命周期函数与新的同时生效；在16.9版本中开启了dev警告，未来将在React 17.x版本中完全弃用，只有新的UNSAFE_生命周期名称将起作用。

在这里，UNSAFE_不是指安全性，而是表示使用这些生命周期的代码在React的未来版本中更有可能出现错误，尤其是在启用异步渲染后。

解决方案

1、直接更改为新的生命周期函数

将代码中的componentWillMount、componentWillReceiveProps、componentWillUpdate函数全部加上UNSAFE_前缀，替换成

UNSAFE_componentWillMount()
UNSAFE_componentWillReceiveProps(nextProps)
UNSAFE_componentWillUpdate(nextProps, nextState)

这样做就不用更改原代码逻辑，不存在改完后出现BUG的问题，但是也只是临时方案，最终还是要迁移到其他生命周期函数的，说不定什么时候UNSAFE_的函数就被完全抛弃了呢。

如果没时间或者要修改的地方太多，想偷下懒的话，可以使用react-codemod脚本自动重命名

cd your_project
npx react-codemod rename-unsafe-lifecycles

有时候可能会出现But before we continue, please stash or commit your git changes.的警告，只需要提交下git代码或者加上--force强制执行。

2、替换为其他生命周期函数

① componentWillMount -> componentDidMount
componentWillMount()会在render之前被调用，因此在此方法中同步调用 setState() 不会触发额外渲染，并且通常都是在构造函数 constructor()中初始化 state。

在大多数情况下，都可以直接将代码移至componentDidMount。而在支持服务器渲染时，当前需要同步提供数据，通常也会在componentWillMount中获取数据(fetching)，但可以使用构造函数constructor代替。

有一个常见的误解，即在componentWillMount中进行获取数据，可以避免出现第一个空渲染状态。实际上，这是行不通的，因为React总是在componentWillMount之后立即执行render。如果在componentWillMount触发时数据不可用，则无论在何处启动fetching，第一个渲染器仍将显示加载状态。这就是为什么在大多数情况下将数据获取(fetching)移到componentDidMount不会产生明显影响的原因。

② componentWillReceiveProps -> componentDidUpdate
componentWillReceiveProps()会在已挂载的组件接收新的 props 之前被调用。如果你需要更新状态以响应 prop 更改（例如，重置它），你可以比较 this.props 和 nextProps 并在此方法中使用 this.setState() 执行 state 转换。

使用此生命周期方法通常会出现 bug 和不一致性：

如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用 componentDidUpdate 生命周期。
如果你使用 componentWillReceiveProps 仅在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。
如果你使用 componentWillReceiveProps 是为了在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用 key 使组件完全不受控代替。

③ componentWillUpdate -> componentDidUpdate
这是一个组件的示例，该组件在内部状态更改时调用外部函数：

// Before
class ExampleComponent extends React.Component {
  componentWillUpdate(nextProps, nextState) {
    if (
      this.state.someStatefulValue !==
      nextState.someStatefulValue
    ) {
      nextProps.onChange(nextState.someStatefulValue);
    }
  }
}

有时人们使用componentWillUpdate是因为担心当componentDidUpdate触发时，更新其他组件的状态“太晚了”。事实并非如此。React确保在componentDidMount和componentDidUpdate期间发生的任何setState调用在用户看到更新的ui之前被刷新。一般来说，最好避免像这样层叠更新，但在某些情况下它们是必要的（例如，如果在测量渲染的dom元素之后需要定位工具提示）。

不管怎样，在异步模式下为此目的使用componentWillUpdate都是不安全的，因为一次更新可能会多次调用外部回调。相反，应该使用componentDidUpdate生命周期，因为它保证每次更新只调用一次：

// After
class ExampleComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (
      this.state.someStatefulValue !==
      prevState.someStatefulValue
    ) {
      this.props.onChange(this.state.someStatefulValue);
    }
  }
}

End

参考链接：

React过时的生命周期 2019-09-23

解决方案

1、直接更改为新的生命周期函数

2、替换为其他生命周期函数

End

猜你喜欢

热点阅读