react代码中使用了componentWillReceiveProps，出现了页面卡死情况，也不报错，直接浏览器页签卡死

本文链接：https://blog.csdn.net/qq_37834631/article/details/140871250

react代码中使用了componentWillReceiveProps，出现了页面卡死情况，也不报错，直接浏览器页签卡死，使用console.log也不管用。

导致问题的原因

在 componentWillReceiveProps 中可能进行了不适当的操作，导致无限循环或性能问题。为了解决这个问题，您可以尝试以下几个步骤：

解决方案

检查 componentWillReceiveProps 中的逻辑
确保在 componentWillReceiveProps 中没有引入导致无限循环或大量计算的逻辑。例如，不要直接调用 setState，除非确定不会引起重新渲染导致的无限循环。
使用 getDerivedStateFromProps 替代 componentWillReceiveProps
尝试将 componentWillReceiveProps 替换为 getDerivedStateFromProps，因为这是官方推荐的替代方法。getDerivedStateFromProps 是一个静态方法，不会引起组件重新渲染。
使用 componentDidUpdate 替代 componentWillReceiveProps （严重推荐）
如果需要在组件更新后执行操作，可以使用 componentDidUpdate，确保在比较新旧 props 后再调用 setState。

注意事项

建议直接使用第 3 种方法，因为它实现起来更迅速、效果更好。

区别：`componentWillReceiveProps`、`getDerivedStateFromProps` 和 `componentDidUpdate`

componentWillReceiveProps 是 React 类组件生命周期方法之一，用于在组件接收到新的 props 时执行一些操作。然而，这个方法已经在 React 16.3 版本中被标记为不推荐使用，并将在未来版本中被废弃。建议使用 getDerivedStateFromProps 或者 componentDidUpdate 来代替 componentWillReceiveProps。

`componentWillReceiveProps` 的使用方法

在 componentWillReceiveProps 中，可以通过访问新的 props 和当前的 props 来执行一些操作，例如更新组件的状态。

class MyComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.someValue !== this.props.someValue) {
      this.setState({ derivedData: nextProps.someValue });
    }
  }

  render() {
    return (
      <div>
        {this.state.derivedData}
      </div>
    );
  }
}

替代方法

使用 `getDerivedStateFromProps`

getDerivedStateFromProps 是一个静态方法，可以用来在 props 改变时更新组件的状态。

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.someValue !== prevState.someValue) {
      return {
        derivedData: nextProps.someValue
      };
    }
    return null;
  }

  render() {
    return (
      <div>
        {this.state.derivedData}
      </div>
    );
  }
}

使用 `componentDidUpdate`（推荐）

componentDidUpdate 可以在组件更新后执行操作，这样可以避免在组件更新之前进行状态更新。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.someValue !== prevProps.someValue) {
      this.setState({ derivedData: this.props.someValue });
    }
  }

  render() {
    return (
      <div>
        {this.state.derivedData}
      </div>
    );
  }
}