reactjs - 在 React 中设置和清除间隔必须使用 useRef Hook 吗？

Question

我目前正在了解 useRef 钩子(Hook)及其用法。访问 DOM 是我理解的一个非常直接的用例。第二个用例是 ref 的行为类似于类组件中的实例字段。和 react docs提供一个从点击处理程序设置和清除时间间隔的示例。我想知道，如果不需要从单击处理程序中取消时间间隔，我们是否可以使用在 useEffect 中声明的局部变量来设置和清除间隔，如下所示？还是使用文档中提到的 ref 总是要采取的方法？

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

Answer 1

如 stated at the docs you shared ;

If we just wanted to set an interval, we wouldn’t need the ref (id could be local to the effect).

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

but it’s useful if we want to clear the interval from an event handler:

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