什么是React非合成事件（库外管理事件）？如何理解React批处理？

你已经熟悉React合成事件的典型写法onClick={handlerFunction}——这类事件是React在虚拟DOM层统一封装、全流程接管注册/触发/销毁逻辑的事件，所有回调都运行在React的管控上下文中。
对应的非合成事件，核心判定标准只有一个：事件的注册、触发全流程完全脱离React事件体系管控，React无法感知到这类事件的执行上下文。
常见的非合成事件/触发场景包括：

• 手动绑定到真实DOM上的原生事件：比如通过DOM ref拿到真实节点后，调用addEventListener直接绑定的事件回调，这类绑定直接走浏览器原生事件流，React没有参与任何环节
• 原生JS/浏览器API调度的异步回调：比如setTimeout、setInterval、Promise.then、requestAnimationFrame、原生XHR/fetch的请求完成回调，这类回调的执行时机由JS引擎或浏览器调度，不在React的管控范围内
• 无React适配的第三方原生JS库触发的回调：比如原生地图SDK、原生轮播库等直接操作真实DOM绑定的交互事件，触发时不会经过React的事件系统

React批处理的核心逻辑是：对同一执行上下文中触发的多次状态更新（setState）进行合并，只触发一次重渲染，避免重复计算造成的性能损耗。

合成事件的回调全程运行在React可感知的上下文中，因此无论你在合成事件回调里调用多少次setState，React默认都会做批处理。

非合成事件对批处理的影响要分版本看：

• React 18 之前：非合成事件的执行上下文React无法感知，因此回调里触发的多次setState不会自动批处理，每调用一次setState就会立刻触发一次重渲染。如果需要手动实现批处理，需要调用unstable_batchedUpdates包裹回调逻辑
• React 18 及之后：版本引入了自动批处理能力，默认会对所有上下文（包括非合成事件、异步回调）中的多次更新做合并，只有显式调用flushSync时才会打断批处理，立刻同步刷新DOM更新

内容的提问来源于stack exchange，提问作者user19404608