为什么在这个反应示例中使用useRef?只是为了概念演示

Question

只是想知道useRef在示例中的作用是什么：https://reactjs.org/docs/hooks-faq.html#is-有一些类似实例变量：

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

我尝试过并且可以在没有使用的情况下实现相同的Ref如下：

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

因此，react文档中的"但如果我们想从事件处理程序中清除间隔，这很有用"这句话和这个答案：useRef Hook是在react中设置和清除间隔的必需项吗？，只是一点意思都没有。

Answer 1

只有当您不想在handleCancelClick中停止计时器并将所有逻辑保留在单个useEffect中时(这种情况非常罕见(，才可以。

请看，如果在运行timer和handleCancelClick之间进行任何重新渲染(因为任何useState条目更改或道具更改(，则会得到变量const interval = null;，单击时不会发生任何事情(clearTimeout(null);不执行任何操作(。

不知道如何在不保留渲染之间的数据的情况下进行处理。