reactjs - react : useState or useRef?

Question

我正在“Hooks FAQ ”阅读有关 React useState() 和 useRef() 的内容，我对一些似乎具有同时使用 useRef 和 useState 解决方案，我不确定哪种方式是正确的。

来自“Hooks 常见问题解答”about useRef() :

"The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class."

使用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都可以在重新渲染后记住它们的数据。因此，如果您的变量决定 View 层渲染，请使用 useState。否则使用 useRef

我建议阅读这篇文章article .