React 合成事件委托新旧版本绑定位置及原因？

核心回答

• 绑定目标：①老版本（React 16 及之前）：合成事件委托统一绑定到 document 对象；②新版本（React 17 及之后）：绑定到应用根节点（即 ReactDOM.createRoot 传入的 DOM 元素，如 <div id="root"></div>）。

• 老版本绑定 document 的原因：①简化实现：document 是 DOM 树顶层节点，所有子元素的事件冒泡最终都会到达，无需判断应用挂载位置；②适配单应用场景：早期 React 主要用于单页应用（SPA），无多应用共存冲突；③兼容低版本浏览器：规避不同浏览器对局部节点事件冒泡的差异行为。

• 新版本绑定根节点的原因：①解决多应用冲突：微前端架构下多个 React 应用共存时，绑定 document 会导致事件拦截、重复触发；②减少冒泡开销：根节点比 document 更靠近事件源，事件冒泡路径更短，提升性能；③避免库冲突：规避与 jQuery 等传统库的 document 事件监听器相互干扰；④优化卸载逻辑：应用卸载时，根节点的事件监听器可随根元素一起移除，减少 document 上残留无用监听器导致的内存泄漏。

延伸问题-回答

1. 延伸问题：合成事件与原生事件的交互有何影响？

回答：①老版本：若原生事件在 document 上调用 event.stopPropagation()，会阻断 React 合成事件（因合成事件依赖冒泡到 document）；②新版本：仅阻止根节点以下的冒泡不会影响合成事件（合成事件在根节点捕获），阻止根节点到 document 的冒泡也不干扰 React 事件，隔离性更强。

2. 延伸问题：版本迁移时需要注意什么？

回答：①避免直接操作 document 事件：若需拦截 React 组件事件，应操作应用根节点而非 document；②微前端适配：确保每个 React 应用使用独立根节点，避免根节点嵌套导致事件重复委托；③卸载 API 迁移：ReactDOM.unmountComponentAtNode 替换为 root.unmount()。

（注：文档部分内容可能由 AI 生成）