React 生命周期中的误用：componentWillReceiveProps

见解分享

2023-09-25 21:51:55

在 React 生命周期中，深入了解 componentWillReceiveProps

前言

React 生命周期包含一系列方法，用于在组件的各个阶段处理事件。其中一个容易被误解的方法是 componentWillReceiveProps。为了避免在使用时出现意外行为，我们必须深入了解它的作用和替代方法。

componentWillReceiveProps 的本质

componentWillReceiveProps 是一个 React 生命周期方法，它在两个情况下被触发：

当组件从父组件或自身状态更新中接收新 props 时。
在首次渲染之后，无论 props 是否发生变化。

因此，它不仅会在父组件的 props 发生变化时触发，还会在组件自身状态更新后触发。

componentWillReceiveProps 的缺陷

componentWillReceiveProps 的一个主要问题是，它依赖于 props 的浅比较。这意味着，即使 props 的引用没有改变，但它的值发生了改变，componentWillReceiveProps 也不会被触发。

解决方法：getDerivedStateFromProps

为了克服 componentWillReceiveProps 的局限性，React 引入了替代方法：getDerivedStateFromProps。

getDerivedStateFromProps 也是一个 React 生命周期方法，它在以下情况下被调用：

当组件接收新 props 时，无论 props 是否发生变化。

与 componentWillReceiveProps 不同，getDerivedStateFromProps 允许我们使用 props 和之前的 state 来计算新的 state。这使我们能够在 props 发生变化时更新 state，而不管 props 的引用是否发生改变。

示例

考虑以下示例代码，它使用 componentWillReceiveProps 来比较 props 中数组的变化：

class MyComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.someArray !== this.props.someArray) {
      // 做一些事情
    }
  }

  render() {
    return <div>{this.props.someArray}</div>;
  }
}

如果 someArray 是一个数组，并且我们使用 setState() 将其更新，则 componentWillReceiveProps 不会被触发，即使数组中的元素发生了变化。这是因为 someArray 的引用仍然相同。

我们可以将上述示例中的代码重写如下，以利用 getDerivedStateFromProps：

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps) {
    if (nextProps.someArray !== props.someArray) {
      return { someArray: nextProps.someArray };
    }
    return null;
  }

  render() {
    return <div>{this.props.someArray}</div>;
  }
}