React中在Subscription与useEffect()里使用状态变量的问题

为什么variableFromStore始终显示false？ #

这是闭包陷阱导致的：

• 初始的useEffect没有依赖项，只会在组件首次挂载时执行一次。此时variableFromStore的值是false，订阅回调会捕获这个值并形成闭包。
• 后续variableFromStore更新为true时，组件会重新渲染，但首次创建的订阅回调依然引用着旧的闭包值（false），所以打印结果始终和Redux调试器里的真实值脱节。

加[variableFromStore]依赖后会发生什么？ #

是的，每次variableFromStore的值变化时，这个useEffect都会重新执行，也就是会创建新的订阅实例。但这里有个关键隐患：如果不清理旧订阅，每次变量更新都会新增一个订阅，最终多个订阅回调同时存在，可能引发重复执行、内存泄漏等问题。

正确的实现方式 #

必须在useEffect的返回函数中取消旧订阅，确保每次变量更新时替换掉旧的订阅：

const variableFromStore = useSelector(state => state.variableFromStore);
const dispatch = useDispatch(); // 注意原代码拼写错误：useDisptach → useDispatch

useEffect(() => {
    // 创建新订阅
    const subscriptionEvent = SomeModule.AddSubscription(event => {
        console.log(variableFromStore);
        if(variableFromStore) {
            dispatch(foo());
        }
    });

    // 清理函数：组件卸载或依赖变化时取消旧订阅
    return () => {
        SomeModule.RemoveSubscription(subscriptionEvent); // 假设存在对应的取消订阅方法
    };
}, [variableFromStore, dispatch]); // Redux的dispatch是稳定引用，可安全加入依赖数组

补充说明：

• 如果foo是组件内自定义的函数，需要用useCallback包裹后加入依赖数组，避免不必要的订阅重建；若foo是外部定义的action creator，则无需额外处理。

内容的提问来源于stack exchange，提问作者four-eyes