如何避免复杂状态变更导致的重复setTimeout问题？

算力阿峰

2026-8-3

解答

原代码bug原因

原代码用useState存储timeoutID，但React状态更新是异步的，组件重新渲染时timeoutId的取值可能不是最新的，导致无法正确清理旧的timeout。加上严格模式的二次渲染，会残留未被清理的timeout，最终所有Alert被提前关闭。

useRef存储timeoutID是正确用法

useRef的核心用途之一就是存储跨渲染周期的可变值，修改ref.current不会触发组件重新渲染，非常适合存储timeoutID这类不需要触发UI更新的副作用标识，你的修复方案完全符合React规范，没有问题。

额外优化建议

规范处理副作用清理：在组件卸载或alertKey变化时，确保清理所有未完成的timeout，避免内存泄漏。可以用useEffect实现：

useEffect(() => {
  return () => {
    if (timeoutIdRef.current) {
      clearTimeout(timeoutIdRef.current);
    }
  };
}, [props.alertKey]);

这样每次alertKey变化或组件卸载时，都会自动清理旧的timeout，比在条件判断中清理更可靠。

将副作用移至useEffect：原代码在渲染阶段直接执行副作用逻辑，不符合React规范。可以把Alert显示和timeout创建逻辑放到useEffect中，配合alertKey作为依赖：

useEffect(() => {
  if (props.text === '') return;
  
  setIsIn(true);
  // 清理旧timeout
  if (timeoutIdRef.current) {
    clearTimeout(timeoutIdRef.current);
  }
  // 创建新timeout
  const id = setTimeout(() => setIsIn(false), props.exitAfterDuration);
  timeoutIdRef.current = id;

  // 组件卸载或依赖变化时清理timeout
  return () => clearTimeout(id);
}, [props.alertKey, props.text, props.exitAfterDuration]);

这种方式能避免严格模式下的重复执行问题（严格模式会调用两次清理函数，确保副作用被正确清理）。