React-合成事件与原生事件的执行顺序
原文中文，约1900字，阅读约需5分钟。
📝
内容提要
React 18中，合成事件先于原生事件处理，提高性能、确保一致性和开发体验。合成事件委托到根元素，减少处理器数量，支持批处理更新。合成事件系统统一接口，保持不同浏览器行为一致。与并发模式配合，提供流畅用户体验。
🔎
延伸解读
事件委托如何影响执行顺序
React 将所有事件处理器委托到根元素，而非直接绑定在按钮上。点击按钮时，事件冒泡到根元素，React 在根元素上先执行合成事件处理器，之后原生事件才在按钮上触发。因此，合成事件先于原生事件执行，这是事件委托机制的直接结果。
批处理更新与性能优化
合成事件系统支持批处理更新，能将多个状态更新合并为一次渲染。先处理合成事件，React 可以确保事件处理过程中的所有状态更新都被批处理，减少不必要的重新渲染，从而提升性能。这是合成事件先于原生事件处理的重要原因之一。
跨浏览器一致性与并发模式
合成事件提供了统一的事件接口，屏蔽了不同浏览器的差异，确保事件处理器行为一致。同时，React 18 的并发模式允许更智能地调度任务，合成事件系统能更好地与之配合，提供更流畅的用户体验。这些设计目标共同要求合成事件优先处理。
❓
Q&A
React 18 中合成事件的处理顺序是怎样的？
在 React 18 中，合成事件先于原生事件处理，确保性能优化和一致性。
合成事件系统如何提高性能？
合成事件系统通过事件委托减少事件处理器数量，并支持批处理更新，从而提高性能。
合成事件系统如何确保跨浏览器兼容性？
合成事件系统提供统一的事件接口，屏蔽不同浏览器之间的差异，确保行为一致。
React 的合成事件与并发模式有什么关系？
合成事件系统能够更好地与并发模式配合，提供更流畅的用户体验。
合成事件如何处理状态更新？
合成事件系统支持批处理更新，将多个状态更新合并为一次渲染，减少不必要的重新渲染。
合成事件的设计对开发体验有什么影响？
合成事件的设计提高了一致性和性能，提供了更好的开发体验。
🏷️
