如何减少 React 重渲染

React 是一个广泛应用于构建用户界面的 JavaScript 库。其中，它的声明式编程模型是最重要的优点之一，因为它使得开发人员可以轻松地创建可维护的复杂 UI。然而，在一个具有大量组件和嵌套层次结构的应用程序中，React 应用程序中的重渲染可能会影响性能。因此，在本文中，我们将探讨如何减少 React 重渲染。

什么是 React 重渲染？

在不必要的情况下，React 组件重新渲染的过程被称为 React 重渲染。当组件的状态或属性更改时，React 将重新渲染该组件及其子组件。但是，如果没有必要重新渲染组件，这可能会导致性能问题。

如何减少 React 重渲染？

1. 使用 shouldComponentUpdate 方法

React 组件有一个 shouldComponentUpdate 方法。该方法可以决定组件是否需要重新渲染。默认情况下，组件在每个状态或属性更改时都会重新渲染。但是，通过实现 shouldComponentUpdate 方法，您可以控制组件的重新渲染。这样，只有在必要时才会重新渲染组件，这将提高应用程序的性能。

下面是一个使用shouldComponentUpdate方法的例子：


class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }
  render() {
    return (
      <div style={{ color: this.props.color }}>
        Count: {this.state.count}
      </div>
    );
  }
}

2. 使用 PureComponent

PureComponent 是 React 中的一个特殊组件。它使用 shouldComponentUpdate 方法来自动进行浅比较。当组件的状态或属性更改时，只有当它们与先前的状态或属性不同才会重新渲染组件。因此，PureComponent 可以减少不必要的重渲染。

下面是一个使用PureComponent的例子：


class MyComponent extends React.PureComponent {
  render() {
    return (
      <div style={{ color: this.props.color }}>
        Count: {this.props.count}
      </div>
    );
  }
}

3. 使用 React.memo

React.memo 是一个高阶组件，用于记忆组件的渲染结果。它与 PureComponent 类似，但是应用于函数组件。当函数组件的 props 不变时，React.memo 将返回以前记忆的组件渲染结果。这可以减少不必要的重渲染。

下面是一个使用React.memo的例子：


const MyComponent = React.memo(function MyComponent(props) {
  return (
    <div style={{ color: props.color }}>
      Count: {props.count}
    </div>
  );
});

4. 避免在 render 方法中执行副作用

在 React 组件的 render 方法中执行副作用可能会导致组件在不必要的情况下重新渲染。例如，如果您在 render 方法中调用 setState 方法，那么每次重新渲染时都会更新组件的状态。因此，您应该将副作用代码移到生命周期方法或 useEffect 钩子中。

下面是一个避免在render方法中执行副作用的例子：


class MyComponent extends React.Component {
  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }
  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

结论

重渲染可能会影响 React 应用程序的性能，特别是在具有大量组件和嵌套层次结构的应用程序中。然而，通过使用 shouldComponentUpdate 方法、PureComponent、React.memo 和避免在 render 方法中执行副作用等技术，您可以减少不必要的重渲染。这将提高您的应用程序的性能并提供更好的用户体验。