为什么 useRef 可用于在 react 中存储 setInterval 引用而不是普通变量？

问题描述

我正在尝试理解 React 中的 useRef 钩子。

我在 react 中创建了一个简单的时间。其代码如下。

import { useRef,useState,useEffect } from 'react';

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

export default Parent;

这里我使用钩子创建了一个 ref 并且我正在监视计数状态。当它达到 0 时，我正在调用 'clearInteval' 函数来清除计时器。

此代码运行良好。

但是当我尝试使用普通变量而不是钩子创建的变量来做同样的事情时，间隔没有被清除。

请在下面找到相同的代码。

import { useRef,setCount]=useState(5);
  const ref=useRef(0);
let hold=0;
  const countdown=()=>{
    hold=setInterval(()=>{
        // console.log('ref.current-->',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 将在每次渲染时重新创建，因此您每次都会丢失并替换其值。

每次状态更改时，您的 Parent 组件都会重新渲染，因此您可以将间隔引用保留为 useRef 的引用。