从原生JS事件到React事件

前言

React是一个由JS开发出来的框架，为了让React有更好的性能。React团队开发了一套自己独特的体系。今天就来研究研究React的事件机制有什么区别吧。

概念

React有着自己独特的事件机制，合成事件。它是为了让React模拟原生DOM事件所有能力的一个事件对象。

那么为什么React会开发自己独特的事件机制呢？

• 为了让浏览器兼容，并且更好的跨平台运行React
  • React采用顶层事件代理机制来保证冒泡的一致性，可以跨浏览器执行。React提供的合成事件就是来抹平不同浏览器事件对象之间的差异，将不同平台事件模型合成事件。
• 减少事件频繁被创建销毁，避免垃圾回收机制
  • 事件对象可能会被频繁的创建和回收，因此React引入了事件池，在事件池中获取或释放对象。换句话说，就是React事件对象不会被释放掉而是存入一个数组中，当事件被触发，就从数组中弹出，避免了频繁地创建和销毁
• 方便事件统一管理和事务机制
  • 利用事件委托的方式，将所有事件处理器都附加在顶层文档节点上。这意味着即使有大量组件和事件处理器，也只会有一个顶级事件处理器，这大大减少了内存消耗并提高了性能。

合成事件与原生事件的差异

• 在原生事件中，命名方式一般都是纯小写，而React事件命名采用小驼峰方式
• 在原生事件中事件处理为字符串，React的JSX语法中，传入一个函数作为事件处理函数
• 在原生事件中，可以通过返回false来阻止默认行为，而React需要显式使用preventDefault()来阻止默认行为

React事件和原生事件的执行顺序

React的合成事件是通过事件委托绑定在组件的顶层，并在组件卸载阶段自动销毁绑定的事件。

React所有的事件都是挂载到document对象上，当真实DOM元素触发事件会冒泡到document后，再处理React事件。所有，一般是先执行原生事件再处理React事件，最后真正执行document上挂载的事件。