React 事件代理原理 事件绑定在顶级容器:React 在组件的最外层容器(比如在ReactDOM.render()方法挂载的DOM节点上)绑定一个单一的事件监听器,而不是为每个子组件分别绑定。 合成事件系统:React 创建了自己的合成事件(SyntheticEvent),它是对浏览器原生事件的一层抽象,无论底层浏览器如何,合成事件的行为都是一致的。当用户交互发生时,相应的原生事件会冒泡到顶层。 事件分发:当事件冒泡到顶层的事件监听器时,React 根据事件的目标(event.target)来判断哪个组件应当处理这个事件,并调用相应组件上绑定的事件处理器。 映射关系:React 维护了一种映射关系,记录了每个组件内部定义的事件处理器与其对应的实际DOM节点之间的联系。当合成事件触发时,React能够准确地找到应当处理这个事件的组件实例,并调用相应的处理函数 React 16 之前,事件代理确实是在document级别进行的,这样做的确有可能引起全局事件冲突和性能问题。 React 17 引入了一个重要的改进,它改变了事件绑定的位置。React 17开始,事件监听器会直接附加到React组件挂载的DOM节点上,而不是像以前那样固定在document上。这样可以避免与外部库或其他独立于React的事件监听器产生冲突,同时减少不必要的全局事件监听。