React17与React18点击事件行为差异及触发异常原因咨询

核心原因：React 18的自动批处理与事件执行时机变化 #

React 18引入了自动批处理（Automatic Batching），这一特性改变了状态更新后组件渲染和副作用（useEffect）的执行时机，进而打乱了原生事件冒泡与React副作用的执行顺序，导致了你遇到的异常问题。

具体执行流程对比 #

React 17中的正常流程

1. 点击Select组件按钮，原生事件开始冒泡，最终到达document时触发React合成事件处理函数handleSelectButtonClick。
2. 执行setIsOpened(true)，React在事件处理函数执行完成后（此时原生事件冒泡已结束），同步触发组件重新渲染。
3. 组件重新渲染后，useEffect检测到isOpened变为true，为document添加点击监听器closeByClick。
4. 由于当前点击事件的冒泡已经完成，closeByClick不会被触发，ul正常展开。

React 18中的异常流程

1. 点击Select组件按钮，React合成事件处理函数handleSelectButtonClick立即执行（React 18将合成事件绑定到根容器而非document，触发时机更早）。
2. 执行setIsOpened(true)，React的自动批处理机制会在原生事件冒泡未完成时，就调度组件重新渲染并执行对应的useEffect。
3. useEffect为document添加点击监听器closeByClick，此时原生事件仍在冒泡过程中。
4. 原生事件继续冒泡到document，触发刚添加的closeByClick，将isOpened设为false，导致ul刚展开就关闭。

为什么event.stopPropagation()能解决问题 #

添加event.stopPropagation()后，会阻止原生事件继续向上冒泡到document，即使React 18中提前添加了document的点击监听器，也无法捕获到当前的点击事件，因此closeByClick不会被触发，ul能正常展开。

替代优化方案 #

除了阻止事件冒泡，你也可以通过判断点击目标是否属于Select组件内部，在closeByClick中避免误关闭：

const closeByClick = (e) => {
  const selectElement = document.getElementById('your-select-component-id');
  if (!selectElement?.contains(e.target)) {
    setIsOpened(false);
  }
};

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