React合成事件

64 阅读1分钟

react事件绑定,不会真正的绑定到具体某个元素上,而是绑定到根节点上document v16/root v17+上,采用事件代理的方案click一个按钮,他会等冒泡冒到root节点上, 通过事件的target事件源找到哪个元素真实触发的,然后从这个触发的元素到顶点之间所有节点都去查一下,有木有一个onClick的属性,如果有就把这个事件执行一下,完整的模拟了冒泡流程。好处:占用内存小,不用关心什么时候移除事件,只要这个节点从页面中消失了,自然就没有onClick事件了,也无需解绑了

事件触发的本质是对 dispatchEvent 函数的调用。root统一处理事件,将事件派发到具体的组件实例上

自定义事件和原生事件冲突了,先执行原生事件,后执行合成事件。可以通过e.stopPropagation阻止合成事件执行。

优点:

采用这种事件处理方式,不仅可以磨平浏览器的差异解决一些兼容问题,还可以减少事件注册,优化性能。还可以在合成时间中处理 React 的其他逻辑。