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 等：
// 原生事件命名方式
//React合成事件命名方式
2. 事件处理函数写法不同
原生事件中事件处理函数为字符串，在 React JSX 语法中，传入一个函数作为事件处理函数。
// 原生事件处理函数写法
//React合成事件处理函数写法
3. 阻止默认行为方式不同
在原生事件中，可以通过返回 false 方式来阻止默认行为，但是在 React 中，需要显式使用e.preventDefault() 方法来阻止。
这里以阻止 标签默认打开新页面为例，介绍两种事件区别：
// 原生事件阻止默认行为方式
onclick="console.log('原生事件阻止默认行为'); return false"
>
原生事件阻止默认行为
// React合成事件阻止默认行为方式
const handleClick = e => {
e.preventDefault();
console.log('合成事件阻止默认行为');
}
合成事件阻止默认行为
四、 React合成事件与原生事件执行顺序
在 React 中，合成事件会以事件委托方式绑定在Root对象上。这里我们手写一个简单示例来观察 React 事件和原生事件的执行顺序：
class App extends React.Component {
parentRef;
childRef;
constructor(props) {
super(props);
this.parentRef = React.createRef();
this.childRef = React.createRef();
}
componentDidMount() {
document.addEventListener(
"click",
(e) => {
console.log("原生事件：document DOM 事件捕获---");
},
true
);
this.parentRef.current?.addEventListener(
"click",
() => {
console.log("原生事件：父元素 DOM 事件捕获---");
},
true
);
this.childRef.current?.addEventListener(
"click",
() => {
console.log("原生事件：子元素 DOM 事件捕获---");
},
true
);
document.addEventListener(
"click",
(e) => {
console.log("原生事件：document DOM 事件冒泡！");
},
false
);
this.parentRef.current?.addEventListener(
"click",
() => {
console.log("原生事件：父元素 DOM 事件冒泡！");
},
false
);
this.childRef.current?.addEventListener(
"click",
() => {
console.log("原生事件：子元素 DOM 事件冒泡！");
},
false
);
}
parentClickFun = () => {
console.log("React 事件：父元素事件冒泡！");
};
parentCapture = () => {
console.log("React 事件：父元素事件捕获-----");
};
childClickFun = () => {
console.log("React 事件：子元素事件冒泡！");
};
childCapture = () => {
console.log("React 事件：子元素事件捕获-----");
};
render() {
return (
ref={this.parentRef}
onClick={this.parentClickFun}
onClickCapture={this.parentCapture}
>
ref={this.childRef}
onClick={this.childClickFun}
onClickCapture={this.childCapture}
>
分析事件执行顺序