为什么在Microsoft Edge审查元素中看不到React项目绑定的事件处理程序？

• 合成事件委托机制
  React 内部使用自研的合成事件系统，不会把你在组件内声明的事件处理函数直接绑定到对应的DOM元素上：React 16及更早版本会将所有合成事件统一挂载到document节点，React 17+调整为挂载到React应用的根渲染节点（即你调用ReactDOM.createRoot传入的DOM节点）。Edge Elements面板默认仅展示直接绑定到当前选中元素的原生事件监听器，因此不会显示你写的业务处理函数。
• 浏览器元素面板的展示逻辑限制
  就算你手动选中根节点查看它的事件监听列表，能看到的也只是React内部统一的事件分发处理函数，你自己写的业务逻辑会被React封装在内部状态中，不会直接暴露给原生DOM的事件属性。
• 生产环境编译优化
  若当前项目运行的是生产构建产物，打包工具会对代码做压缩混淆、剥离调试冗余信息，就算浏览器能读取到事件处理函数的引用，你也无法对应到源码里的原始函数代码。

调试建议 #

你可以安装React DevTools浏览器扩展，在组件面板选中对应组件，就能直接查看绑定在组件上的事件处理函数、入参以及相关关联逻辑，调试效率远高于原生Elements面板。

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