是useref钩子必须设置和清除反应间隔吗?

Question

我目前了解useref钩子及其用法。访问DOM是我理解的非常直截了当的用例。第二种用例是REF的行为类似于类组件中的实例字段。React文档提供了一个设置和清除点击处理程序的时间间隔的示例。我想知道，如果不需要从单击处理程序中取消时间间隔，我们是否可以在使用效率下在以下内容中使用本地变量设置和清除间隔？还是使用文档中提到的REF总是要采用的方法？

useEffect(() => {
 const id = setInterval(() => {
  // ...
  });
  return () => {
    clearInterval(id);
  };
})

Answer 1

，如您共享的文档所述;

如果我们只是想设置一个间隔，我们就不需要参考(ID可能是本地效果的(。

  useEffect(() => {
    const id = setInterval(() => {
      setCounter(prev => prev + 1);
    }, 1000);
    return () => {
      clearInterval(id);
    };
  });

，如果我们想清除事件处理程序的间隔，这很有用：

// ...
function handleCancelClick() {
  clearInterval(intervalRef.current);
}
  // ...

Answer 2

我认为该示例只是为了演示USEREF的工作方式，尽管我个人找不到useref的许多用例，除非在<input ref={inputEl} />中使用USEREF定义了utputel。因为如果要定义类似组件实例变量的内容，为什么不使用USESTATE或USEMEMO？我也想了解这一点(为什么在此React示例中使用Useref？只是用于概念解释？(

至于React doc示例https://reactjs.org/docs/hooks-faq.html#is-sheremething-something-something-instance-instance-variables：

function Timer() {
  const intervalRef = useRef();
  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });
  // ...
  function handleCancelClick() {
    clearInterval(intervalRef.current);
  }
  // ...
}

我尝试并可以在没有下面的情况下实现同样的事情：

function Timer() {
  const interval = null;
  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    interval = id;
    return () => {
      clearInterval(interval);
    };
  });
  // ...
  function handleCancelClick() {
    clearInterval(interval);
  }
  // ...
}