React事件系统入门

React基于虚拟DOM实现了一个合成事件层,我们所定义的事件处理器会接受到一个合成事件层对象的实例,它完全符合W3C标准,不会存在任何IE标准的兼容性问题。并且和原生的浏览器事件一样拥有同样的接口,同样支持事件的冒泡机制。所有事件都自动绑定到最外层上。

  • 合成事件的实现机制

    React不会把事件处理函数直接绑定到真实的节点上。而是把所有事件绑定到结构的最外层,使用一个统一的事件监听器,这个事件监听器维持了一个映射保存所有组件内部的事件监听和处理函数。当有事件发生的时候,首先由这个事件监听器处理,然后事件监听器在映射里面找到真正的事件处理函数并调用。这样做简化了事件处理和回收机制,效率很大的提升了。

在React中使用DOM原生事件时,一定要在组件卸载的时候,手动移除,否则可能会出现内存泄漏的问题,而在使用合成事件系统的时候,则不需要,因为React内部已经帮你妥善处理好这些问题了。

虽然合成事件能够解决内存泄漏的问题,但是在某些情况下,还是必须使用原生的事件才能实现。不要讲合成事件和原生事件混用,但是也可以通过e.target判断来避免。实际上,React的合成事件系统只是原生DOM事件系统的一个子集