[JavaScript知识库]React - React v18 的 批处理

一、批处理

批处理是 React将多个状态更新分组到单个re-render中以获得更好的性能的操作。

例如，如果你在同一个点击事件中有两个状态更新，React 总是将它们分批处理到一个重新渲染中。如果你运行下面的代码，你会看到每次点击时，React 只执行一次渲染，尽管你设置了两次状态：

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

这对性能非常有用，因为它避免了不必要的重新渲染。它还可以防止您的组件呈现仅更新一个状态变量的“半完成”状态，这可能会导致错误。

在 React 18 之前，我们只在 React 事件处理程序期间批量更新。默认情况下，React 中不会对 promise、setTimeout、原生事件处理（native event handlers）或其它React默认不进行批处理的事件进行批处理操作。

二、setState 的批处理

React 18 之前

在 React 18 之前，React 只能在组件的生命周期函数或者合成事件函数中进行批处理。

默认情况下，Promise、setTimeout 以及原生事件中是不会对其进行批处理的。如果需要保持批处理，则可以用 unstable_batchedUpdates 来实现，但它不是一个正式的 API。

handleClick = () => {
  setTimeout(() => {
    console.log('setTimeout 更新之前：', this.state.num); // 0
    this.setState(state => ({ num: state.num + 1 }))
    console.log('setTimeout 更新之后：', this.state.num); // 1
  })
}

import ReactDOM from 'react-dom'
const { unstable_batchedUpdates } = ReactDOM

handleClick = () => {
  setTimeout(() => {
    unstable_batchedUpdates(()=>{
	  console.log('setTimeout 更新之前：', this.state.num); // 0
	  this.setState(state => ({ num: state.num + 1 }))
	  console.log('setTimeout 更新之后：', this.state.num); // 0
  	})
  })
}

React 18 之后

从 React 18的createRoot开始，所有更新都将自动批处理，无论它们来自何处。

这意味着timeouts, promises, native event handlers或任何其他事件内的更新将以与 React 事件内的更新相同的方式进行批处理。

handleClick = () => {
  setTimeout(() => {
    console.log('setTimeout 更新之前：', this.state.num); // 0
    this.setState(state => ({ num: state.num + 1 }))
    console.log('setTimeout 更新之后：', this.state.num); // 0
  })
}

如果想在 React 18 退出批处理，官方提供了一个 API flushSync。

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f);
  });
  // React has updated the DOM by now
}

三、React 的渲染模式

React 批处理方式的改变，主要是因为改变了渲染模式，React 目前有三种渲染模式

1. legacy 模式：ReactDOM.render(<App />, rootNode)。React 18 前的设计模式，这将创建一个以“遗留”模式运行的 root。使用此 API 会有一个警告，表明它已被弃用并切换到 New Root API。
2. blocking 模式：ReactDOM.createBlockingRoot(rootNode).render(<App />) 。可以视为 concurrent 的优雅降级版本和过渡版本
3. concurrent 模式 ：ReactDOM.createRoot(rootNode).render(<App />)。这将创建一个在 React 18 中运行的 root，它添加了 React 18 的所有改进并允许使用并发功能。React 18 采用的模式，拥有不同的优先级，更新的过程可以被打断。

legacy 模式，根据 isBatchUpdate 判断是否批量更新，在 React 事件中有自动处理批更新的功能。非 React 事件想使用这个功能必须使用 unstable_batchedUpdates。

concurrent 模式，是以优先级为依据对更新进行合并的。 每次更新会进行优先级的判定，相同优先级的任务会被合并，所有的 setState 在默认情况下都是批处理更新的。

参考链接：
Automatic batching for fewer renders in React 18
Automatic Batching in React 18: What You Should Know
一探那些令人興奮的 React 18 三大新 features
React18 setState之 Automatic batching
一篇带给你 React 18 升级指南