面试题：在React函数式组件中如何手动触发批量更新

实现方式及涉及API

在React函数式组件中，当默认批量更新规则不符合需求时，可使用unstable_batchedUpdates API来手动触发批量更新。此API在React 18之前是legacy_createStore 中的 batchedUpdates ，React 18引入了新的 unstable_batchedUpdates 。示例代码如下：

import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    unstable_batchedUpdates(() => {
      setCount(count + 1);
      setCount(count + 1);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

适用场景

性能优化：在某些场景下，多次状态更新可能会导致不必要的重渲染，使用批量更新可将多次更新合并为一次，减少重渲染次数，提升性能。比如在一个表单中有多个字段的联动更新，若不批量更新，每次更新一个字段都会触发一次重渲染，批量更新可将这些更新合并，只触发一次重渲染。
事件处理：当在非React事件（如原生JavaScript事件）中需要进行多次状态更新时，默认情况下React不会批量处理这些更新。此时使用unstable_batchedUpdates ，可让状态更新表现得和在React事件中一样，即批量处理，避免多次不必要的重渲染。

面试题：在React函数式组件中如何手动触发批量更新

知识考点

面试题答案

实现方式及涉及API

适用场景