seTimeout()如何连续执行？

Question

既然我们知道setTimeout()函数只执行一次，那么下面的程序如何连续执行：

import {useState} from "react"

const App = () => {

        const [counter, setcounter] = useState(0);

        setTimeout( () => setcounter (counter+1), 1000)
        

        return (
          <div>{counter} </div>
        )

}

export default App

请问有人能识别吗？哪段代码触发setTimeout()连续执行？

Answer 1

连续执行是由于每次使用setCounter更新状态时组件都会重新渲染。 当计数器发生变化时，React 会重新渲染组件，导致 setTimeout 再次通过一个新的回调来设置，该回调会增加计数器的值。 此循环无限期地继续，每个 setTimeout 调用都会触发另一个渲染，从而触发另一个 setTimeout。 这是直接在组件主体中将 React 的状态更新与 setTimeout 结合在一起而没有任何条件停止或控制执行的无意效果。

要在 React 组件中正确使用 setTimeout，您应该将其合并到 useEffect 挂钩中。这确保了计时器仅在组件安装时设置一次，并在组件卸载时清除，从而防止内存泄漏。这是一个例子：

import { useState, useEffect } from "react";

const App = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => setCounter(counter + 1), 1000);
    return () => clearTimeout(timer); // Cleanup the timer on component unmount
  }, [counter]); // This effect runs whenever `counter` changes

  return <div>{counter}</div>;
};

export default App;

此代码通过在 useEffect 中设置超时来每秒递增计数器，每次计数器更改时都会重新触发。 清理功能可确保在组件卸载时清除计时器，从而避免潜在的资源使用问题。