React事件机制 – 合成事件

React事件机制是React重要的基础知识，也是面试过程中经常被提及的问题。本文将介绍React事件机制 - 合成事件的概念以及作用等知识点，本文将重点以React V17版本为准。
本文所用代码仓库

一、 概念介绍

React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，在React中这套事件机制被称之为合成事件。
与原生事件直接在元素上注册的方式不同的是，React的合成事件不会直接绑定到目标DOM节点上，用事件委托机制，以队列的方式，从触发事件的组件向父组件回溯，直到Root节点。因此，React组件上声明的事件最终绑定到了Root对象（React17之前是Document）上。在Root节点，用一个统一的监听器去监听，这个监听器上保存着目标节点与事件对象的映射。当组件挂载或卸载时，只需在这个统一的事件监听器上插入或删除对应对象；当事件发生时（即Root上的事件处理函数被执行），在映射里按照冒泡或捕获的路径去组件中收集真正的事件处理函数，然后，由这个统一的事件监听器对所收集的事件逐一执行。
这样做的好处：
• 对事件进行归类，可以在事件产生的任务上包含不同的优先级
• 提供合成事件对象，抹平浏览器的兼容性差异
• 减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 Root上注册一次
• 对开发者友好

二、 原生事件回顾

JavaScript原生事件的执行需要经过三个阶段，事件捕获-事件目标-事件冒泡。

1. 事件捕获
   当某个元素触发某个事件（如 onclick ），顶层对象 Document 就会发出一个事件流，随着 DOM 树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。
2. 事件目标
   当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
3. 事件冒泡
   从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发一次。
4. 事件委托/事件代理
   简单理解就是将一个响应事件委托到另一个元素。
   当子节点被点击时，click 事件向上冒泡，父节点捕获到事件后，我们判断是否为所需的节点，然后进行处理。

三、 合成事件与原生事件区别

React合成事件与原生事件很相似，但不完全相同。这里列举几个常见区别：

1. 事件名称命名方式不同
   原生事件命名为纯小写（如：onclick），而 React 事件命名采用小驼峰式，如 onClick 等：

// 原生事件命名方式
<button onclick="handleClick()">原生事件命名方式</button>

//React合成事件命名方式 
<button onClick={
   handleClick}>合成事件命名方式 </button>

2. 事件处理函数写法不同
   原生事件中事件处理函数为字符串，在 React JSX 语法中，传入一个函数作为事件处理函数。

// 原生事件处理函数写法
<button onclick="handleClick()">原生事件处理函数写法</button>

//React合成事件处理函数写法
<button onClick={
   handleClick}>React合成事件处理函数写法</button>

3. 阻止默认行为方式不同
   在原生事件中，可以通过返回 false 方式来阻止默认行为，但是在 React 中，需要显式使用e.preventDefault() 方法来阻止。
   这里以阻止 标签默认打开新页面为例，介绍两种事件区别：

// 原生事件阻止默认行为方式
<a href="https://www.baidu.com" 
  onclick="console.log('原生事件阻止默认行为'); return false"
>
  原生事件阻止默认行为
</a>

// React合成事件阻止默认行为方式
const handleClick = e => {
   
  e.preventDefault();
  console.log('合成事件阻止默认行为');
}
const clickElement = <a href="https://www.baidu.com" onClick={
   handleClick}>
  合成事件阻止默认行为
</a>

四、 React合成事件与原生事件执行顺序

在 React 中，合成事件会以事件委托方式绑定在Root对象上。这里我们手写一个简单示例来观察 React 事件和原生事件的执行顺序：

class App extends React.Component {
   
  parentRef;
  childRef;
  constructor(props) {
   
    super(props);
    this