React严格模式下UNSAFE_componentWillReceiveProps警告问题及组件改造方案咨询

嘿，我来帮你解决这个React的生命周期警告问题！官方已经明确标记UNSAFE_componentWillReceiveProps为不安全的生命周期方法，主要因为它在组件渲染前触发，容易导致不可预测的状态变更，咱们得根据你的Component组件使用这个方法的具体场景来改造，下面分两种最常见的情况给你说清楚：

情况1：用它做数据请求或副作用操作 #

如果你的UNSAFE_componentWillReceiveProps里是写了数据获取、订阅这类副作用代码，直接把逻辑迁移到componentDidUpdate就好，记得加个条件判断，不然每次组件更新都会触发，浪费性能：

// 之前的旧代码
UNSAFE_componentWillReceiveProps(nextProps) {
  if (nextProps.itemId !== this.props.itemId) {
    this.fetchItemDetails(nextProps.itemId);
  }
}

// 改造后的新代码
componentDidUpdate(prevProps) {
  // 对比之前的props和当前props，只有变化时才执行
  if (prevProps.itemId !== this.props.itemId) {
    this.fetchItemDetails(this.props.itemId);
  }
}

componentDidUpdate是在组件更新完成后触发的，不会阻塞渲染，完全符合React处理副作用的最佳实践。

情况2：用它根据props更新state（衍生状态） #

如果这个生命周期是用来根据props的变化更新组件state，那有两种更优的方案：

方案一：用记忆化替代state（优先选这个！） #

如果你的衍生状态可以直接通过props计算出来，根本没必要存在state里，直接在render里计算就行。要是计算逻辑比较重，就用缓存工具来优化：

// 之前的旧代码
UNSAFE_componentWillReceiveProps(nextProps) {
  if (nextProps.searchKeyword !== this.props.searchKeyword) {
    this.setState({
      filteredData: this.filterData(nextProps.data, nextProps.searchKeyword)
    });
  }
}

// 改造后的类组件代码
render() {
  // 直接用props计算，不用存到state里
  const filteredData = this.filterData(this.props.data, this.props.searchKeyword);
  return (
    <ul>
      {filteredData.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

要是计算量很大，类组件可以用memoize-one这类轻量库缓存计算结果；如果是函数组件，直接用useMemo钩子就搞定了。

方案二：用static getDerivedStateFromProps（万不得已才用） #

如果确实需要把衍生状态存在state里（比如要结合之前的state值来计算），那就用static getDerivedStateFromProps替代，这个方法是纯函数，不会有副作用：

// 之前的旧代码
UNSAFE_componentWillReceiveProps(nextProps) {
  if (nextProps.addCount !== this.props.addCount) {
    this.setState({
      total: this.state.currentTotal + nextProps.addCount
    });
  }
}

// 改造后的新代码
static getDerivedStateFromProps(nextProps, prevState) {
  // 对比之前保存的props值和新props，判断是否需要更新state
  if (nextProps.addCount !== prevState.lastAddCount) {
    return {
      total: prevState.currentTotal + nextProps.addCount,
      lastAddCount: nextProps.addCount // 把当前props存到state，下次用来对比
    };
  }
  return null; // 不需要更新state时返回null
}

注意这个方法是静态的，不能访问this，所以得把之前的props值存在state里用来做对比判断。

给你的Component组件的改造步骤 #

1. 先打开你的Component组件，看看UNSAFE_componentWillReceiveProps里的代码到底是做副作用还是处理衍生状态；
2. 要是副作用，直接迁移到componentDidUpdate加条件判断；
3. 要是衍生状态，优先考虑去掉state，直接用props计算，必要时加缓存；实在需要存state就用getDerivedStateFromProps；
4. 最后测试一下组件的所有交互场景，确保改造后功能和之前完全一致，没出现状态异常的情况。

内容的提问来源于stack exchange，提问作者Irtaza Hussain