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

Question

我目前正在了解 useRef 挂钩及其用法。访问 DOM 是一个我理解的非常简单的用例。第二个用例是 ref 的行为类似于类组件中的实例字段。React文档提供了一个从点击处理程序设置和清除时间间隔的示例。我想知道，如果不需要从点击处理程序取消时间间隔，我们可以使用 useEffect 中声明的局部变量来设置和清除间隔吗？或者使用文档中提到的引用始终是要采取的方法？

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

Answer 1

正如您共享的文档中所述；

\n\n

\n

如果我们只是想设置一个间隔，我们就不需要 ref （id 可以是效果的本地）。

\n

\n\n

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

\n\n

\n

但如果我们想从事件处理程序中清除间隔，它\xe2\x80\x99s很有用：

\n

\n\n

// ...\nfunction handleCancelClick() {\n  clearInterval(intervalRef.current);\n}\n  // ...\n

\n