React（v18）事件原理

1. 背景

在旧版 React 中，事件的处理方式不完全符合标准的事件流顺序。事件的处理顺序是：

1. 事件监听（比如通过 addEventListener 注册的事件）
2. 捕获阶段的事件处理（即从父元素到子元素的处理）
3. 冒泡阶段的事件处理（即从子元素到父元素的处理）

而新版 React（v18）修复了这个问题，将事件处理的顺序调整为：

1. 捕获阶段的事件处理
2. 事件监听（即 onClick 等处理函数）
3. 冒泡阶段的事件处理

2. 事件绑定

新版 React 的事件绑定方式有所变化：

• 在初始化时（即创建根元素时），React 会一次性在所有需要的地方注册事件监听器。
• 对于每种事件，如果事件是不冒泡的，那么会执行一次，否则React 会在两个阶段进行绑定：捕获阶段和冒泡阶段。

3. 事件触发

当事件发生时，React 处理事件的步骤是：

1. 事件分发： React 通过内部的 dispatchEvent 函数开始处理事件。
2. 事件队列： React 会创建一个事件队列，将需要处理的事件按顺序添加进去。
3. 执行事件： React 遍历事件队列，按照捕获阶段和冒泡阶段的顺序执行事件处理函数。捕获阶段的处理函数从后往前执行，冒泡阶段的处理函数从前往后执行。

如果某个事件处理函数中调用了 stopPropagation（即阻止事件继续传播），React 会停止后续的事件处理。

总结

新版 React 改进了事件处理的顺序，使其更符合浏览器的标准事件流。这意味着事件处理会更准确地按照捕获和冒泡阶段来执行，并且在初始化阶段会更高效地绑定事件。这样做的好处是可以更一致地模拟浏览器的事件行为，确保事件处理的顺序和效果更加可靠。