useRef Hook 是否必须在 React 中设置和清除间隔？

Question

我目前正在了解 useRef 挂钩及其用法。访问 DOM 是我理解的一个非常简单的用例。第二个用例是 ref 的行为类似于 class 组件中的实例字段。 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);
}
  // ...

Answer 2

我认为该示例只是为了演示 useRef 的工作原理，尽管我个人无法找到 useRef 的许多用例，但 <input ref={inputEl} /> inputEl 是使用 useRef 定义的。因为如果你想定义类似组件实例变量的东西，为什么不使用 useState 或 useMemo？其实我也想学(Why using useRef in this react example? just for concept demostration?)

关于 React 文档示例 https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables:

function Timer() {
  const intervalRef = useRef();

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

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

我尝试过并且可以在不使用 useRef 的情况下实现相同的效果，如下所示：

function Timer() {
  const interval = null;

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

  // ...
  function handleCancelClick() {
    clearInterval(interval);
  }
  // ...
}

useRef Hook 是否必须在 React 中设置和清除间隔？

Is useRef Hook a must to set and clear intervals in React?

reactjs

react-hooks