问题描述
只是想知道 useRef 在示例中的作用是什么:https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables:
Just wonder what purpose the useRef serve here in example: 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 的情况下实现相同的效果,如下所示:
I tried and can achieve the same without useRef as below:
function Timer() {
const interval = null;
useEffect(() => {
const id = setInterval(() => {
// ...
});
interval = id;
return () => {
clearInterval(interval);
};
});
// ...
function handleCancelClick() {
clearInterval(interval);
}
// ...
}
所以说但如果我们想从事件处理程序中清除间隔是有用的"来自反应文档和这个答案:是否必须使用 useRef Hook 在 React 中设置和清除间隔?,几乎没有任何意义.
So the saying "but it’s useful if we want to clear the interval from an event handler" from the react doc and this answer: Is useRef Hook a must to set and clear intervals in React?, just mean almost nothing at all.
推荐答案
仅当您不想在 handleCancelClick
中停止计时器并将所有逻辑保留在单个 useEffect
中时才可以>(这种情况非常罕见).
It's fine only if you don't want stopping timer in handleCancelClick
and keep all logic inside single useEffect
(which would be really rare case).
看,如果您在运行计时器和 handleCancelClick
之间获得任何重新渲染(由于任何 useState
条目更改或道具更改),您将获得该变量 const interval = null;
并且点击时什么都不会发生(clearTimeout(null);
什么都不做).
See, if you get any re-render(because of any useState
entry changed or props changed) between running timer and handleCancelClick
you will get that variable const interval = null;
and nothing will happen on click(clearTimeout(null);
does nothing).
不知道如何在不保留渲染之间的数据的情况下处理这种情况.
Don't see how that can be handled without preserving data between renders.
这篇关于为什么在这个反应示例中使用 useRef ?只是为了概念演示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!