反应：useState或useRef？

Question

我读约阵营useState()，并useRef()在“ 鱼钩常见问题解答 ”，我糊涂了关于一些使用案例，似乎有useRef和useStatehtml" target="_blank">解决方案的同时，我不知道哪条路是正确的方式。

从关于useRef（）的“挂钩常见问题”中：

“ useRef（）钩不仅用于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);
    };
  });

  // ...
}

这两个示例将具有相同的结果，但是哪个示例更好-为什么？

Answer 1

两者之间的主要区别是：

useState导致重新渲染，useRef不会。

它们之间的共同点是两者，useState并且useRef在重新渲染后可以记住它们的数据。因此，如果您的变量是决定视图图层渲染的变量，请使用useState。其他用途useRef

我建议阅读这篇文章。