在 react 中，若在 `useeffect` 中为 `document` 添加全局 click 事件监听器，该监听器可能在组件挂载瞬间被触发一次——根本原因在于：触发挂载的原始点击事件尚未被浏览器事件系统完全消费，仍处于传播阶段，新挂载的监听器会立即捕获它。
这是一个常被忽视但极具迷惑性的行为：你点击父组件按钮（如 "Mount Child"）来渲染子组件，而子组件在 useEffect 中同步注册了 document.addEventListener('click', handler) —— 此时，那个“导致子组件挂载”的原始点击事件并未消失，它仍在事件流中（处于冒泡阶段），而新注册的监听器恰好能捕获到它。
这与事件机制本质相关：浏览器的事件处理是同步且基于事件流（捕获 → 目标 → 冒泡）的。React 的 useState 更新和组件挂载虽是异步调度的，但 useEffect 的执行紧随 DOM 提交之后，此时上一个用户点击事件尚未退出冒泡阶段。因此，document 上新绑定的监听器会立刻响应这个“遗留”点击。
✅ 验证方式：将 click 换成 mousemove 或 keydown，就不会出现该现象——因为那些事件与触发挂载的操作无关，不存在“残留事件”。
正确的修复方案：延迟监听或过滤初始触发
最简洁、符合 React 惯用模式的解法是 使用 useRef 标记挂载状态，并在事件处理器中忽略首次（挂载前）的调用：
import React, { useEffect, useRef } from "react";
function Child() {
const isMountedRef = useRef(false);
useEffect(() => {
isMountedRef.current = true; // 标记已挂载
const handleClick = () => {
if (isMountedRef.current) {
console.log("hi"); // ✅ 仅在真正挂载后响应
}
};
document.addEventListener("click", handleClick);
return () => {
document.removeEventListener("click", handleClick);
console.log("unmounting");
};
}, []); // 注意：依赖数组为空，确保只运行一次
return <div>Child</div>;
}
export default Child;⚠️ 关键要点：
- 使用 useRef 而非 useState，避免因状态更新引发额外渲染；
- isMountedRef.current = true 在 useEffect 执行时立即设为 true，确保后续所有点击都通过校验；
- useEffect 依赖数组必须为 []，防止重复绑定/解绑；
- 不要将 isMountedRef 放入依赖数组（useRef 值本身不变，且不应触发重运行）。
进阶建议：优先考虑更安全的事件作用域
全局 document 监听易引发冲突与内存泄漏风险。若业务允许，推荐替代方案：
- 使用事件委托绑定到更具体的父容器（如
）； - 利用 event.target.closest() 判断点击是否落在预期区域；
- 对于模态框、下拉菜单等场景，配合 useClickAway 等成熟 Hook（如 @uidotdev/use-click-away）。
总之，这不是 React 的 bug，而是浏览器原生事件模型与 React 渲染时机交汇下的必然行为。理解它，才能写出健壮、可预测的事件逻辑。
