React useEffect钩子运行行为不符合预期问题咨询

问题原因 #

• React状态更新是异步的
  调用setArrowChange(true)后，无法在当前渲染周期内立即获取到更新后的arrowChange值。React会批量处理状态更新，新状态只会在组件下一次重渲染时生效，所以你在setArrowChange之后立即打印的仍然是当前渲染周期的旧值。

• useEffect存在闭包捕获机制
  你的useEffect仅将arrowState作为依赖项，每次arrowState变化触发useEffect执行时，useEffect回调、内部的定时器函数、返回的清理函数，都会捕获当前渲染周期所有状态变量的快照，这些值后续不会随状态更新而改变。

日志交替出现true/false的逻辑 #

每次点击切换arrowState时，会先执行上一次useEffect的清理函数，清理函数捕获的是上一次渲染周期的arrowChange值，执行清理时你调用了setArrowChange(false)修改状态。等到新的useEffect执行时，拿到的已经是被清理函数修改后的arrowChange值，就会出现一次true一次false的交替现象。同时定时器回调捕获的也是当前useEffect里的旧arrowChange值，所以会出现明明调用了setArrowChange(true)，定时器里判断仍然为false的情况。

修复方案 #

调整useEffect逻辑，清除无效定时器，状态更新使用函数式写法避免依赖闭包捕获的旧值即可实现每次切换弹出1秒提示的效果：

useEffect(() => {
  setArrowChange(true);
  // 记录定时器id用于清理
  const timer = setTimeout(() => {
    // 函数式更新直接拿到最新状态，不依赖闭包捕获的值
    setArrowChange(() => false);
  }, 1000);

  return () => {
    // 清除未执行的定时器，避免内存泄漏
    clearTimeout(timer);
    setArrowChange(false);
  };
}, [arrowState]);

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