反应: useState还是useRef？
反应: useState还是useRef？
提问于 2019-06-05 07:23:54
我在“useState()”网站上读到了React useState()和useRef()的内容，我对一些似乎同时有useRef和useState解决方案的用例感到困惑，我不知道哪种方法是正确的。
来自“钩子常见问题”的关于useRef()
“useRef() Hook不仅适用于DOM参考文献，”ref“对象是一个通用容器，其当前属性是可变的，可以保存任何值，类似于类上的实例属性。”
使用useRef()
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id;
return () => {
clearInterval(intervalRef.current);
};
});
// ...
}使用useState()
function Timer() {
const [intervalId, setIntervalId] = useState(null);
useEffect(() => {
const id = setInterval(() => {
// ...
});
setIntervalId(id);
return () => {
clearInterval(intervalId);
};
});
// ...
}这两个例子都有相同的结果，但是哪一个更好--为什么呢？
Stack Overflow用户
发布于 2021-11-26 20:43:42
这在很大程度上取决于您使用计时器的目的，这一点并不清楚，因为您没有显示组件呈现的内容。
- 如果希望在组件的呈现中显示计时器的值，则需要使用useState。否则，ref的更改值将不会导致重呈现，并且计时器不会在屏幕上更新。
- 如果必须发生其他事情--应该在计时器的每个滴答处可视地更改UI，则使用useState，并将计时器变量放入useEffect钩子的依赖数组中(在该数组中执行UI更新所需的任何操作)，或者根据计时器值在呈现方法(组件返回值)中执行逻辑。SetState调用将导致重新呈现，然后调用useEffect挂钩(取决于依赖关系数组)。对于ref，不会发生更新，也不会调用useEffect。
- 如果您只想在内部使用计时器，则可以使用useRef。每当有事情发生时，都会引起重放(如。在经过一段时间之后，您可以从您的setState回调中用setInterval调用另一个状态变量。这将导致组件重新呈现。
只有在真正需要的时候才能使用参考文献。在流程或性能问题的情况下)，因为它不跟随"反应方式“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56455887
复制相关文章
相似问题
腾讯云开发者
