React中setInterval重复初始化异常及组件渲染问题咨询

一、Sidebar组件计数停在1的原因 #

你的Sidebar组件里，setInterval的回调函数陷入了闭包陷阱：

• 你在useEffect中传入了空依赖数组[]，这意味着这个effect只会在组件挂载时执行一次，创建的定时器回调会捕获初始渲染时的calls值（也就是0）。
• 每次定时器触发时，执行setCalls(calls + 1)，本质上是把状态设置为0 + 1 = 1。组件重新渲染后，calls变成1，但旧的定时器回调仍然引用着闭包中保存的旧calls值（0），所以后续每次触发还是会执行setCalls(0 + 1)，导致计数永远停在1，日志也一直打印interval called for 1 times。

原问题中的Sidebar关键代码：

const Sidebar: React.FC<{ content: string }> = ({ content }) => {
  const [calls, setCalls] = useState(0);
  useEffect(() => {
    setInterval(() => {
      console.log('interval called for', calls + 1, 'times');
      setCalls(calls + 1); // 这里的calls永远是初始的0
    }, 1000);
  }, []); // 空依赖导致effect只执行一次
  return <div>{`content${content}, calls: ${calls}`}</div>;
};

二、修改MainElement后出现的问题 #

你在MainElement中新增了一个空依赖的useEffect创建定时器，但没有添加清理函数清除定时器：

• 这个定时器会在MainElement挂载后持续运行，但它本身不会触发组件重新渲染（因为没有修改任何状态）。
• 你看到的日志是两个定时器各自的输出：MainElement的定时器打印interval called from mainelement，Sidebar的定时器仍然因为闭包问题打印interval called for 1 times。
• 如果后续MainElement被卸载又重新挂载，还会创建多个重复的定时器，造成内存泄漏。

三、解决方案 #

1. 修复Sidebar的计数问题 #

推荐使用函数式更新来获取最新状态，不需要依赖calls，也不会受闭包影响：

const Sidebar: React.FC<{ content: string }> = ({ content }) => {
  const [calls, setCalls] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      // 函数式更新会接收当前最新的状态值prevCalls
      setCalls(prevCalls => {
        console.log('interval called for', prevCalls + 1, 'times');
        return prevCalls + 1;
      });
    }, 1000);
    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(intervalId);
  }, []);
  return <div>{`content${content}, calls: ${calls}`}</div>;
};

或者，如果你需要依赖calls，可以把它加入effect的依赖数组，并在清理函数中清除旧定时器：

const Sidebar: React.FC<{ content: string }> = ({ content }) => {
  const [calls, setCalls] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('interval called for', calls + 1, 'times');
      setCalls(calls + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, [calls]); // 依赖calls，每次calls变化时重建定时器
  return <div>{`content${content}, calls: ${calls}`}</div>;
};

这种方法虽然可行，但每次状态变化都会销毁并重建定时器，性能不如函数式更新。

2. 修复MainElement的定时器问题 #

无论哪个组件使用定时器，都必须在effect的清理函数中清除，避免内存泄漏和重复定时器：

const MainElement: React.FC<{ setElement2Content: (input: string) => void }> =
  ({ setElement2Content, children }) => {
    useEffect(() => setElement2Content('content set in element 1'), []);
    useEffect(() => {
      const intervalId = setInterval(() => {
        console.log('interval called from mainelement');
      }, 1000);
      // 卸载时清除定时器
      return () => clearInterval(intervalId);
    }, []);
    return <div>{children}</div>;
  };

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