reactjs - react :useState或useRef？

我正在“Hooks FAQ”上阅读有关React useState()和useRef()的信息，我对某些似乎同时具有useRef和useState解决方案的用例感到困惑，但我不确定哪种方法是正确的。

从“挂钩常见问题解答” about useRef()中:



使用 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);
    };
  });

  // ...
}

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

最佳答案

两者之间的主要区别是:
useState会导致重新渲染，而useRef不会。

它们之间的共同点是，useState和useRef都可以在重新渲染后记住其数据。因此，如果您的变量是决定 View 图层渲染的变量，请使用useState。其他使用useRef
我建议阅读此article。