如何使用useEffect有条件返回订阅者？代码有效性及执行疑问

你的需求很明确，我们先直接分析你给出的示例代码，再给出正确的实现方式。

示例代码的问题 #

你提供的这段代码无法完全满足你的需求：

useEffect(()=>{
  if (condition) {
    const subscriber = someSubscriber();
    return subscriber
    }
 },[condition])

• 当condition从true变为false时，这次effect没有返回任何清理函数，所以上一次创建的订阅不会被取消，违反了你“条件不满足时取消活跃订阅”的要求；
• 当condition不满足时，不会进入if分支，someSubscriber()根本不会被调用，自然也不会有订阅行为。

最佳实现方式 #

要同时满足你的三个需求，正确的做法是在effect中统一返回清理函数，不管当前条件是否满足，确保每次状态变化或页面卸载时都能清理之前的订阅：

useEffect(() => {
  let unsubscribe = null;
  // 条件满足时创建订阅
  if (condition) {
    unsubscribe = someSubscriber(); // 假设someSubscriber返回的是取消订阅的函数
  }

  // 统一返回清理逻辑：存在活跃订阅就取消
  return () => {
    if (unsubscribe) {
      unsubscribe();
    }
  };
}, [condition]);

为什么这样写能满足所有需求？ #

• 条件不满足时取消订阅：当condition从true变为false时，effect会先执行上一次返回的清理函数，调用unsubscribe取消之前的订阅，然后再执行当前的effect逻辑（此时不创建新订阅）；
• 条件满足时订阅：当condition为true时，进入分支创建订阅，保存取消函数；
• 页面卸载时清理所有订阅：组件卸载时，React会自动调用effect的清理函数，此时如果存在活跃的unsubscribe函数，就会执行它取消订阅。

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