React的批处理机制：更新过程中经历了什么？

疯犬丨哈士奇
306 阅读4分钟

今天哈士奇聊的问题来源于之前和组长讨论过的一个问题：如果在一个块作用域里面多次使用{setstate();},React究竟经历了什么过程呢？所以今天哈士奇希望通过这篇文章简单探讨一下React的批处理机制。

React 的 批处理机制（Batching） 是一种优化更新的策略，它允许 React 在同一个事件循环内合并多个状态更新，最终只触发一次重新渲染。这种机制可以减少不必要的渲染，提升性能。

1. 批处理机制的核心思想

在普通的 React 更新流程中，每次调用 setState（或者在 useState 中更新状态）时，React 都会进行一次状态更新和重新渲染。为了避免多次调用 setState 导致多次渲染，React 引入了批处理机制。在批处理机制中，如果多个状态更新发生在同一个事件循环内，React 会将这些状态更新合并为一次，最后只进行一次重新渲染。

2. 批处理机制如何工作

  • 事件处理程序内的批处理：在 React 的事件处理函数中，React 默认会对多个 setState 调用进行批处理。例如：

    function handleClick() {
  setCount(count + 1); // 这不会立即触发重新渲染
  setText('Updated'); // 也不会立即触发重新渲染
  // React 会合并这两个状态更新，并触发一次渲染
}

    在上面的代码中，React 会将 setCount 和 setText 的状态更新合并，然后在事件处理程序结束后进行一次渲染。这样，虽然调用了两次 setState，React 只会重新渲染一次。

  • 生命周期方法中的批处理：类似地，在 React 的生命周期方法中，如 componentDidMount 或 useEffect，多个 setState 调用也会被批处理。

    useEffect(() => {
  setCount(count + 1);
  setText('Updated');
  // 依然会合并成一次渲染
}, []);

    多个 setState 调用在生命周期方法中也会被批处理，触发一次渲染。

3. 批处理机制的边界

  • 异步代码中的批处理（React 17 及以下版本）：在 React 17 及其以下版本中，异步操作（如 setTimeout、Promise 的回调中）不会触发批处理，状态更新会立即导致重新渲染。

    setTimeout(() => {
  setCount(count + 1); // 这会立即触发重新渲染
  setText('Updated'); // 又会触发一次重新渲染
}, 1000);

    在这种情况下，每次调用 setState 都会导致一次独立的重新渲染，造成性能损失。

  • React 18 的自动批处理：从 React 18 开始，批处理机制得到了改进，自动批处理功能也扩展到所有的异步操作中，包括 setTimeout、Promise、fetch 等异步回调。这意味着即使在异步操作中，多个状态更新也会被批处理。

    setTimeout(() => {
  setCount(count + 1); // 不会立即渲染
  setText('Updated'); // 依然不会立即渲染
  // 在 React 18 中，这两个状态更新会合并为一次渲染
}, 1000);

4. React 18 中的自动批处理

在 React 18 中，批处理的范围得到了显著扩展。所有在 React 控制范围内的状态更新，无论是同步还是异步，都会被自动批处理。之前在异步场景中需要手动处理的情况（如 setTimeout、Promise），在 React 18 中会自动处理，避免了每次状态更新都重新渲染的问题。

React 18 的自动批处理可以通过以下示例来理解：

function handleClick() {
  setTimeout(() => {
    setCount(count + 1);
    setText('Updated');
    // 在 React 18 中，这两个状态更新会被批处理，只会导致一次渲染
  }, 1000);
}

在 React 18 中，即便 setState 发生在异步回调中，React 也会合并这些更新并在回调执行结束后进行一次渲染。

5. 手动禁用批处理

在 React 18 中，虽然自动批处理功能默认启用，但如果有特定场景需要立即触发重新渲染，可以通过 flushSync 来禁用批处理。例如：

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(count + 1); // 立即触发渲染
  });
  setText('Updated'); // 这部分仍然会被批处理
}

flushSync 会立即刷新状态更新，强制 React 立即重新渲染，而不会等待批处理结束。

6. 批处理的好处

  • 性能优化：通过减少不必要的重新渲染，批处理提高了应用的性能。
  • 减少 UI 闪烁：避免了多次 setState 导致的多次 UI 重绘，使得用户体验更加平滑。
  • 一致性：通过合并多次状态更新，React 确保在批处理结束后，应用处于一致的状态。

总结

React 的批处理机制是一种重要的性能优化手段，能够将多个状态更新合并成一次渲染，从而减少 DOM 操作和不必要的重绘。在 React 18 中，批处理功能被扩展到异步操作，使得开发者不需要手动处理异步更新。通过了解批处理机制的原理和应用场景，可以有效提升 React 应用的性能。

avatar
文章
阅读
粉丝