如何减少 React 重渲染

什么是 React 重渲染？

在不必要的情况下，React 组件重新渲染的过程被称为 React 重渲染。当组件的状态或属性更改时，React 将重新渲染该组件及其子组件。然而，不必要的渲染会对应用程序性能造成负面影响。

如何减少 React 重渲染？

1. 使用 shouldComponentUpdate 方法

通过实现 shouldComponentUpdate 方法，开发者可以精确控制组件何时需要重新渲染。该方法接收新的 props 和 state，返回布尔值决定是否进行渲染。

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 自动进行浅层比较。当组件的状态或属性更改时，只有当它们与先前的状态或属性不同才会重新渲染组件。

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

3. 使用 React.memo

React.memo 是函数组件的优化工具。当函数组件的 props 不变时，React.memo 将返回以前记忆的组件渲染结果。

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

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

在 render 方法中调用 setState 或其他副作用会导致不必要的重渲染。应将副作用代码移至生命周期方法（如 componentDidMount、componentDidUpdate）或使用 useEffect 钩子。

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 应用的性能并提升用户体验。