什么是合成事件
React 并不是直接将原生 DOM 事件绑定到元素上，而是实现了一套合成事件（SyntheticEvent）系统。它在 document（React 17 之后改为根节点）上使用事件委托，统一管理和分发事件，并提供跨浏览器的一致性。
合成事件不仅抹平了浏览器差异，还让 React 能够掌控事件处理函数的执行时机，这就为批量更新提供了基础。
批量更新的本质
在没有批量更新机制时，每次调用 setState（或 useState 的更新函数）都会立即触发组件重新渲染。如果同一个事件处理函数中多次更新状态，就会导致多次不必要的渲染：
function handleClick() {
setCount(c => c + 1); // 触发渲染 1
setFlag(f => !f); // 触发渲染 2
setName('new'); // 触发渲染 3
}
// 三次渲染，浪费性能React 的做法是：在合成事件处理函数内部，将这些状态更新收集起来，等到事件处理函数执行完毕后，一次性进行批量更新，只触发一次重新渲染。这就是批量更新（Batching）。
合成事件中批量更新的运作机制
当你在 JSX 中使用 onClick、onChange 等合成事件时，React 会在调用你的事件处理函数之前开启批量更新模式。在这个模式下，所有的状态更新都会被放入一个队列中，而不是立即处理。事件处理函数执行结束后，React 会统一处理队列中的所有更新，计算出最终状态，然后只触发一次重新渲染。
示例：
function Counter() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
const handleClick = () => {
setCount(1);
setFlag(true);
// 这里不会立即触发渲染
console.log('更新已入队，但尚未渲染');
};
console.log('组件渲染，当前状态：', count, flag);
return (
<button onClick={handleClick}>
点击: {count} {flag && '已激活'}
</button>
);
}点击按钮后，控制台输出：
更新已入队，但尚未渲染
组件渲染，当前状态： 1 true关键点：
- 在
handleClick内部，状态更新只是被“安排”了，控制台打印时看到的count和flag仍然是旧值（闭包捕获的值），但渲染只发生一次。 - 这种批量行为对开发者来说是透明的，你不需要做任何额外配置。
批量更新的历史演变
在 React 17 及之前，批量更新只在合成事件和生命周期方法中生效。如果状态更新发生在异步操作（如 setTimeout、Promise、原生事件）中，React 会“漏掉”批量处理，导致每次 setState 都触发一次渲染。
// React 17 及之前，非批量场景
setTimeout(() => {
setCount(c => c + 1); // 触发一次渲染
setFlag(f => !f); // 触发第二次渲染
}, 1000);React 18 引入了 自动批处理（Automatic Batching），将这个优化扩展到几乎所有更新场景，包括 setTimeout、Promise、原生事件等。但在 React 17 或之前的项目中，合成事件仍然是批量更新的主要载体。
实际开发中的影响
- “状态合并”的错觉
在合成事件中，连续的 setState 调用会被合并，最终状态基于队列顺序更新。注意：如果是函数式更新（setCount(prev => prev + 1)），React 会确保你拿到最新的前置状态，而不会受闭包影响。
- 避免依赖批量特性编写逻辑
虽然在合成事件中状态更新是批量的，但你不应该依赖“多次更新只渲染一次”来避免性能问题，因为 React 18 后几乎所有场景都批量了。换言之，你不需要刻意优化，React 已经为你做好了。
- 需明确何时想强制同步更新
在极少数需要立即读取更新后 DOM 的场景（例如测量布局），可以使用 flushSync 强制跳出批量模式，立即同步执行更新。但这通常意味着你的设计需要重新审视。
import { flushSync } from 'react-dom';
function handleClick() {
flushSync(() => {
setCount(c => c + 1);
});
// 此时 DOM 已经更新
}与原生事件的对比
如果直接在 useEffect 中绑定原生事件，在 React 17 及之前的版本中，这些事件处理函数不会享受批量更新。这也是为什么 React 推荐使用合成事件的原因之一——不仅能获得一致的 API，还能自动获得性能优化。
useEffect(() => {
document.addEventListener('click', handleDocumentClick);
return () => document.removeEventListener('click', handleDocumentClick);
}, []);
// 在 React 17 中，handleDocumentClick 内的多次 setState 不会批量
// 在 React 18 中，自动批处理使其也会批量总结
- 合成事件是 React 实现批量更新的关键入口，它让事件处理函数中的多次状态更新自动合并为一次重渲染。
- 这种机制极大地减少了不必要的渲染，提升了应用性能，且对开发者完全透明。
- React 18 将其扩展为自动批处理，覆盖更多场景，但理解合成事件中的批量原理有助于理解 React 状态更新的底层机制。