理解React生命周期componentWillReceiveProps

[qppq54s]

componentWillReceiveProps 以下简称receiveProps
最近在工作中遇到了一行代码上的问题，在receiveProps方法内部调用this.a的时候出现数据丢失问题，具体代码如下：

constructor(props) {
    super(props);
    this.key = null;
} 
componentWillReceiveProps(nextProps) {
    if (nextProps.status !== this.props.status) {
      this.doSomething(nextProps.status);
    }
  }
eventListener(key) { // 某个事件触发
    this.key =key;
    this.props.updateStatus(2); // 调用redux方法，修改props内容
  };

eventLister触发--》receiveProps--》在doSomething方法里调用 this.key。
奇怪的是，第一次调用doSomething可以访问到this.key 第二次调用却会返回null;

ok为了解决问题，我们先看下官方文档上对receiveProps方法的解释

UNSAFE_componentWillReceiveProps()
UNSAFE_componentWillReceiveProps(nextProps)
Note

This lifecycle was previously named componentWillReceiveProps. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

Note:

Using this lifecycle method often leads to bugs and inconsistencies

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.
If you used componentWillReceiveProps to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.
For other use cases, follow the recommendations in this blog post about derived state.

UNSAFE_componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.

React doesn’t call UNSAFE_componentWillReceiveProps() with initial props during mounting. It only calls this method if some of component’s props may update. Calling this.setState() generally doesn’t trigger UNSAFE_componentWillReceiveProps().
Google翻译一下。。
注意：

使用此生命周期方法通常会导致错误和不一致

如果您需要执行副作用（例如，数据提取或动画）以响应props中的更改，请改用componentDidUpdate生命周期。
如果您仅在prop更改时使用componentWillReceiveProps重新计算某些数据，请使用memoization helper。
如果您在prop更改时使用componentWillReceiveProps“重置”某些状态，请考虑使用组件完全控制组件或完全不受控制。
对于其他用例，请遵循此博客文章中有关派生状态的建议。

在安装的组件接收新的props之前调用UNSAFE_componentWillReceiveProps（）。如果您需要更新状态以响应prop更改（例如，重置它），您可以比较this.props和nextProps并使用此方法中的this.setState（）执行状态转换。

请注意，如果父组件导致组件重新渲染，即使props没有更改，也会调用此方法。如果您只想处理更改，请务必比较当前值和下一个值。

在安装过程中，React不会使用初始道具调用UNSAFE_componentWillReceiveProps（）。如果某些组件的道具可能会更新，它只会调用此方法。调用this.setState（）通常不会触发UNSAFE_componentWillReceiveProps（）。

文档上说，使用此生命周期方法通常会导致错误和不一致，那到底是什么原因导致的错误和不一致呢？

后续测试

在电脑端写了个测试程序，程序中的this.key并没有丢失，初步判断是硬件问题导致，具体原因还要继续看。