useEffect执行cleanup后isCanceled仍为false的原因咨询

问题重现 #

期望控制台输出：

start of useEffect
false
cleanup
start of useEffect
true

实际控制台输出：

start of useEffect
false
cleanup
start of useEffect
false

对应代码：

useEffect(() => {
  console.log("start of useEffect")
  let isCanceled = false;
  console.log(isCanceled);

  return () => {
    isCanceled = true;
    console.log("cleanup");
  };
});

核心原因：变量作用域与渲染周期的独立性 #

每次组件重新渲染时，useEffect的回调函数都会被重新执行一遍，函数内部声明的isCanceled是每次执行时全新创建的变量，和上一次渲染周期里的isCanceled没有任何关联。

你在cleanup函数里修改的isCanceled = true，只是修改了上一次渲染时创建的那个isCanceled变量，但当下一次渲染触发useEffect执行时，会重新声明一个新的isCanceled并赋值为false，所以下一次输出的还是初始值。

简单说，两次useEffect执行里的isCanceled是两个完全独立的变量，修改其中一个不会影响另一个。

关于参考文章的补充说明 #

你看的文章里，isCanceled的作用是在异步操作的回调中判断是否取消任务——比如发起请求后，组件卸载或者重新渲染时，通过cleanup把上一次的isCanceled设为true，这样后续异步回调触发时，就能通过这个变量判断是否要放弃处理结果。这种场景下，isCanceled是被异步回调闭包捕获的上一次变量，和下一次渲染的变量无关，所以能正常工作。

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