React中存储setInterval引用为什么要用useRef而非普通变量？

核心原因是React函数组件的重渲染机制和普通JS执行逻辑不同 #

普通局部变量的问题

React函数组件在每次状态更新（比如你这里count变化）时，都会完整重新执行整个组件函数，你在函数内部声明的let hold = 0属于函数局部变量，每次组件重渲染时都会重新初始化：

1. 首次渲染组件时，你点击按钮触发countdown，此时hold被赋值为定时器ID
2. 1秒后定时器触发修改count，组件重渲染，hold被重新创建并赋值为0，之前存储的定时器ID直接丢失
3. 等到count降到0触发useEffect时，拿到的hold已经是重渲染后重置的0，clearInterval(0)自然无法清除之前的定时器

useRef为什么可行

useRef的核心特性是：它返回的引用对象在组件的整个生命周期内都保持同一个引用，不会随组件重渲染被重置，你存在ref.current里的值会一直保留，因此useEffect里总能拿到最初存储的定时器ID，正常清除。

为什么普通JS里能跑

普通JS场景下你的函数不会像React组件一样反复执行整个逻辑，局部变量hold会一直保留在闭包里，自然能拿到正确的定时器ID完成清除。

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