React中用条件useEffect实现点击外部监听的两种方案哪种更优？

首先你给出的第二种实现代码存在两处致命bug：

1. myCondition2 是在useEffect初始化时取的ref值，后续myConditionRef.current更新不会同步到myCondition2，导致handleClick里的判断永远用的是组件挂载时的初始值
2. useEffect顶层的if (!myCondition2) return逻辑会导致如果组件挂载时myCondition为false，就永远不会绑定监听，后续myCondition变为true也无法触发回调

正确的「内部加判断」写法应该是在回调函数内部实时取ref的最新值：

const [myCondition, setMyCondition] = useState<boolean>(false);
const myConditionRef = useRef(myCondition);
// 同步最新状态到ref
myConditionRef.current = myCondition;

useEffect(() => {
  const handleClick = (e: MouseEvent) => {
    // 回调执行时再取最新的条件值
    if (!myConditionRef.current) return;
    // 额外补充：如果是点击外部的需求，这里还要加判断点击目标是否在组件外
    // if (yourComponentRef.current?.contains(e.target as Node)) return;
    // 执行业务逻辑
  };
  document.addEventListener('click', handleClick);
  return () => document.removeEventListener('click', handleClick);
}, []);

方案1：根据myCondition动态增减监听（你写的第一种代码） #

优点 #

• 逻辑直观符合React设计范式，依赖项明确，eslint无警告，后续维护成本低
• 不需要额外维护ref，避免了ref取值时机不对的bug
• myCondition为false时全局没有多余监听，不会触发不必要的回调执行

缺点 #

• 每次myCondition切换状态时都会执行一次事件绑定/解绑操作，不过该操作性能开销极低，普通业务场景完全可以忽略

方案2：长期绑定监听，回调内部加条件判断（修正后的写法） #

优点 #

• 仅在组件挂载/卸载时各执行一次绑定/解绑操作，适合myCondition切换频率极高的特殊场景

缺点 #

• 全局监听长期存在，每次页面点击都会触发回调执行，哪怕只是走if判断也会有累积性能开销（页面同类监听越多开销越明显）
• 需要额外维护状态同步到ref的逻辑，对不熟悉ref的开发者不友好，容易写出bug
• 逻辑不直观，后续维护者需要通读代码才能感知监听逻辑和myCondition的关联

最终推荐 #

90%以上的常规业务场景推荐使用方案1（动态增减监听）：
它的性能开销可以忽略，逻辑更清晰不易出错，也符合React hook的设计理念。只有当你明确遇到myCondition每秒切换数十次以上的极端场景，才考虑使用修正后的方案2。

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