React中onClick与useEffect+addEventListener点击事件执行顺序差异

核心原因：React合成事件系统 vs 原生DOM事件的绑定逻辑不同 #

你遇到的顺序差异，本质是React合成事件（通过onClick属性绑定）和原生DOM事件（通过ref+addEventListener绑定）的触发机制完全不同，和useEffect无关（useEffect只是帮你在组件挂载后执行了addEventListener，相当于原生JS里DOM加载完成后绑定事件）。

具体执行顺序拆解 #

当你点击子元素时，事件流的真实顺序是这样的：

1. 父元素的原生监听器先触发：通过addEventListener绑定的事件是直接挂载在真实DOM节点上的，会在真实DOM事件流的冒泡阶段优先触发——因为从子元素冒泡到父元素时，真实DOM上的监听器会立即执行。
2. 子元素的React合成onClick触发：React的所有合成事件（包括组件上的onClick）并不是直接绑定在DOM节点上，而是统一绑定在document对象上。当真实事件冒泡到document时，React才会根据组件树的层级，模拟事件冒泡的过程，先执行子元素的合成事件回调。
3. 父元素的React合成onClick触发：React模拟冒泡完成后，再执行父元素的合成事件回调。

和原生HTML/JS的差异对比 #

在原生环境中，如果所有事件都用addEventListener绑定，事件会严格按照子元素→父元素的冒泡顺序触发，因为所有监听器都在真实DOM的冒泡阶段按层级执行。但React的合成事件是在document层面统一处理，相当于在真实冒泡的最后一步才开始处理组件的合成事件回调，所以会出现原生监听器先执行的情况。

验证小技巧 #

你可以在每个回调里打印事件的event.target和event.currentTarget，就能清晰看到：

• 原生监听器的currentTarget是父元素的真实DOM节点
• 合成事件的currentTarget是对应的React组件实例（打印时会显示为React元素）

内容的提问来源于stack exchange，提问作者helion3