为何React组件中的setTimeout会持续执行？请分析触发逻辑

问题代码片段 #

直接导致无限循环执行的是这一行代码：

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

原因解释 #

React函数组件的函数体在每次渲染时都会完整执行一遍：

• 初始渲染时，创建第一个setTimeout，1秒后调用setcounter(counter+1)，将counter从0更新为1
• counter更新会触发组件重新渲染，函数体再次执行，又创建一个新的setTimeout，1秒后再把counter更新为2
• 以此类推，每次渲染都会新增一个定时器，形成无限循环

修复方案 #

用useEffect包裹setTimeout，设置空依赖数组，让定时器只在组件挂载时执行一次：

import { useState, useEffect } from "react"

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

  useEffect(() => {
    // 仅在组件挂载时创建一次定时器
    setTimeout(() => setcounter(counter + 1), 1000);
  }, []); // 空依赖数组表示该副作用仅执行一次

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

export default App

如果需要在定时器里获取最新的counter值，推荐使用函数式更新避免闭包问题：

useEffect(() => {
  setTimeout(() => setcounter(prevCounter => prevCounter + 1), 1000);
}, []);

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