React事件机制

合成事件

如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。

步骤

react事件机制执行分为如下两个步骤。

• 事件绑定：当用户在为onClick添加函数时，React并没有将Click时间绑定在DOM上面。而是在document处监听所有支持的事件，
• 事件触发：当事件发生并冒泡至document处时，使用统一的分发函数dispatchEvent将指定函数执行。

特点

• 几乎所有的事件代理(delegate)到document，达到性能优化的目的。(注意⚠️：对于audio、video标签，存在一些媒体事件(例如onplay、onpause)，而这些事件是document不具有的，那么只能在这些标签上进行事件绑定，绑定一个入口分发函数(dispatchEvent))
• 对于每种类型的事件，拥有统一的分发函数dispatchEvent
• 事件对象(event)是合成对象(SyntheticEvent)，不是原生的

合成事件和原生事件的区别

• 写法不同，在原生事件中，事件名称使用小写，而 React 中使用驼峰命名。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

// 原生事件
<button onclick="buttonClick()"> 

// React事件
<button onClick="buttonClick()"> 

• 阻止默认行为不同，在 HTML 中，阻止事件的默认行为使用 return false，而 React 中必须调用 preventDefault。

// 原生
<button onclick="console.log('123'); return false"> 
  
// React
 function buttonClick(e) {
    e.preventDefault()
} 

• 机制不同，原生是直接将事件绑定到当前元素，React 中的事件机制则分为两个阶段：事件注册、事件分发。所有的事件都会注册到 document 上，当触发时，会采用事件冒泡的形式冒泡到document上面，然后React将事件封装给正式的函数处理运行和处理。

 

代码分析：http://zhenhua-lee.github.io/react/react-event.html

参考：http://zhenhua-lee.github.io/react/react-event.html

https://www.jianshu.com/p/8d8f9aa4b033