React setState() 的重新渲染优化：如何避免不必要的重新渲染？

2024-03-15 07:28:46

React 中 setState() 的重新渲染：深入了解与最佳实践

介绍

React 中 setState() 的使用一直是一个备受争议的话题，很多人认为它会触发整个应用程序的重新渲染。然而，事实并非如此。React 使用了一种称为局部更新的优化渲染策略，仅更新受状态更改影响的组件。

局部更新如何工作？

当您调用 setState() 方法时，React 会创建一个更新对象，该对象包含要更新的新状态值。然后，React 将此更新对象与组件的当前状态合并，创建一个新的状态对象。接下来，React 将新状态对象与虚拟 DOM 进行比较，以确定哪些组件需要重新渲染。

何时需要重新渲染？

虽然局部更新通常足以优化渲染过程，但在以下情况下仍然需要重新渲染所有组件：

组件结构发生变化时（例如，添加或删除组件）
根组件的状态发生变化时

案例分析：按钮点击事件

考虑以下示例，其中我们有一个包含子组件 TimeInChild 的 Main 组件。每当单击按钮时，我们调用 this.setState({'test': 'me'}) 来更新 Main 组件的状态。

class Main extends React.Component {
  state = {
    test: 'initial'
  };

  handleButtonClick = () => {
    this.setState({ test: 'me' });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>Click me</button>
        <TimeInChild />
      </div>
    );
  }
}

在这个示例中，状态值没有改变，因此不会触发任何局部更新。但是，因为 setState() 方法被调用，所以 React 会触发一个重新渲染循环，导致 Main 组件及其子组件 TimeInChild 重新渲染。