我目前正在了解 useRef 钩子及其用法。我理解访问 DOM 是一个非常直接的用例。第二个用例是 ref 的行为类似于类组件中的实例字段。并且react文档提供了一个从点击处理程序设置和清除时间间隔的示例。我想知道，如果不需要从点击处理程序中取消时间间隔，我们可以像下面这样使用在 useEffect 中声明的局部变量来设置和清除间隔吗？还是使用文档中提到的 ref 总是要采取的方法？
useEffect(() => {
const id = setInterval(() => {
// ...
});
return () => {
clearInterval(id);
};
})
如您共享的文档所述；
如果我们只是想设置一个间隔，我们就不需要 ref（id 可能是局部的）。
useEffect(() => {
const id = setInterval(() => {
setCounter(prev => prev + 1);
}, 1000);
return () => {
clearInterval(id);
};
});
但如果我们想从事件处理程序中清除间隔，这很有用：
// ...
function handleCancelClick() {
clearInterval(intervalRef.current);
}
// ...
我认为这个例子只是为了演示 useRef 是如何工作的，尽管我个人找不到很多 useRef 的用例，除了<input ref={inputEl} />inputEl 是用 useRef 定义的。因为如果你想定义一个组件实例变量之类的东西，为什么不使用 useState 或 useMemo 呢？实际上我也想学习（为什么在这个react示例中使用 useRef？只是为了概念演示？）
至于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);
}
// ...
}