为什么我们可以使用Useref而不是正常变量来存储setInterval引用？ 我试图了解React中的Useref钩子。 我在React中创建了一个简单的倒计时计时器。 代码在下面。 导入{useref，usestate，useffect}来自'react'; 函数parent（）...

Question

这里，我使用钩子创建了一个REF，并且正在监视计数状态。 当它达到0时，我正在调用

clearInteval

函数以清除计时器。

该代码正常工作。

但是，当我尝试使用普通变量而不是由钩子创建的变量进行相同的变量时，该间隔不会被清除。

这里是修改的代码。

import { useRef, useState, useEffect } from 'react';
    
function Parent() {
  const [count,setCount]=useState(5);
  const ref=useRef(0);
  let hold=0;
  const countdown=()=>{
    hold=setInterval(()=>{
      // console.log('ref.current-->',ref.current);
      setCount((c)=>c-1)
    },1000)
  }
  useEffect(()=>{
    if(count<1)
      clearInterval(hold)
  },[count])
      
  return(
    <>
      <h3>Timer : {count}</h3>
      <br/>
      <button onClick={countdown}>countdown</button>
    </>
  )
}
    
export default Parent;

我在这里不了解什么？

该代码应该在普通的JavaScript中使用。

const myRef = useRef()

将提供一个REF对象，以使

myRef.current

的价值将在呈现方面持续存在。 当您使用

let myVar = something

时，

myVar

将在每个渲染上重新创建，因此您每次都会损失并替换其值。 每次您的状态更改时，您的组件都会重新渲染，因此您将受益于将间隔参考作为参考的参考。