react系统事件如何实现
React 事件系统实现原理
React 的事件系统基于合成事件（SyntheticEvent）机制，通过事件委托和跨浏览器兼容处理实现高效的事件管理。
React 事件是原生事件的跨浏览器包装器，具有与原生事件相同的接口，但行为一致且兼容所有浏览器。React 不会将事件直接附加到子节点，而是通过单一事件监听器在顶层监听所有事件。
合成事件的工作流程
事件注册阶段，React 在组件挂载时解析组件内声明的事件属性（如 onClick）。React 根据事件类型（如 click、change）在 document 上注册原生事件监听。
事件触发时，原生事件会冒泡到 document，React 通过事件插件系统找到对应的事件处理器。React 生成合成事件对象，封装原生事件细节，提供跨浏览器一致 API。
React 根据事件触发组件的 DOM 节点，通过组件树模拟捕获和冒泡阶段，依次调用匹配的事件处理器。事件处理完成后，合成事件对象会被池化回收以供重用。
代码示例
function Button() {
const handleClick = (e) => {
// e 是 SyntheticEvent 实例
console.log('Clicked!', e.nativeEvent);
};
return <button onClick={handleClick}>Click me</button>;
}性能优化策略
事件委托机制减少内存消耗，避免直接为每个元素附加事件监听器。合成事件对象池化减少垃圾回收压力，频繁触发事件时复用事件对象。
React 17 之前事件委托到 document，17 之后改为挂载到 React 渲染树的根 DOM 节点。这种变化支持多版本 React 共存，避免事件系统冲突。
与原生事件区别
合成事件行为与原生事件一致，但存在一些差异。事件传播到 document 后才触发 React 事件处理器，原生 stopPropagation() 可能无法阻止 React 事件处理。
事件处理器接收的是合成事件而非原生事件，需要访问 e.nativeEvent 获取底层事件。某些原生事件（如 focus、blur）没有冒泡阶段，React 通过捕获阶段模拟。
