React 中的 updater

React 是一个流行的 JavaScript 库，用于构建交互式用户界面。创建优秀的 React 应用程序需要深入了解其工作方式。在本文中，我们将重点介绍 React 的 Updater。我们会讨论 Updater 的作用，以及如何使用它来更新 UI。我们还会学习两种不同的 Updater，即 batchedUpdater 和 syncUpdater 。

Updater 是什么？

在 React 中，我们可以通过 setState() 方法来更新组件的状态。但是，当我们调用 setState() 方法时，React 并不会立即更新组件的状态。相反，React 将更新请求添加到 Updater 队列中。

Updater 是 React 内部的一种机制，用于异步更新组件的状态。React 使用了两种 Updater，即 batchedUpdater 和 syncUpdater。这些 Updater 会根据更新请求的数量、运行环境和其他因素来决定何时更新组件，并以何种顺序更新。

Updater 的作用

React 的 Updater 在更新组件状态时发挥着至关重要的作用。使用 Updater，在相同的函数调用堆栈中进行多次 setState() 调用，只会导致一次更新。这可以彻底解决 setState() 在多次调用时导致的性能问题。

此外，我们还可以使用 Updater 来更新组件之外的状态。例如，在 React 中，我们可能需要更新一个 context。我们可以使用 Updater 从组件中更新 context 并让相关组件更新。

Updater 的使用

我们可以使用 Updater 来更新组件的状态和 context。下面是一个简单的例子：

class MyComponent extends React.Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState(state => ({
      count: state.count + 1
    }));
    this.props.updateCount(this.state.count);
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me ({this.state.count})
      </button>
    );
  }
}

在上面的代码中，我们有一个包含计数器的组件。当用户单击按钮时，我们会调用 setState() 方法来更新组件的状态。然后，我们将当前的计数器值发送给 updateCount() 函数。但实际上，updateCount 函数得到的计数器值并不是我们刚刚更新的值。这是因为 setState() 方法是异步的，React 将更新请求添加到 Updater 队列中。

为了解决这个问题，我们可以通过 Updater 强制将组件状态更新同步。我们可以使用 React 的 batchedUpdater 和 syncUpdater。其中，batchedUpdater 在相同的函数调用堆栈中进行的多个 setState() 调用阻塞，只有最后一个 setState() 调用会被执行。syncUpdater 则立即执行更新。

class MyComponent extends React.Component {
 state = {
   count: 0
 };

 handleClick = () => {
   this.setState(state => ({
     count: state.count + 1
   }), () => {
     this.props.updateCount(this.state.count);
   });
 };

 render() {
   return (
     <button onClick={this.handleClick}>
       Click me ({this.state.count})
     </button>
   );
 }
}

在上面的代码中，我们使用 setState() 的第二个参数——回调函数来确保在组件状态更新后运行 updateCount() 函数。

总结

React 的 Updater 是实现组件状态更新的重要机制，也可以用于更新 context。使用 Updater，可以解决多次 setState() 调用导致的性能问题。

在更新组件状态时，我们可以使用 Updater 来确保在需要的时候更新，以及在 setState() 方法之后执行其他代码。batchedUpdater 和 syncUpdater 提供了不同的选项，可以根据具体情况使用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a89fffadd4f0e0ff1ca513