React： useState还是useRef？

Question

我正在“Hooks FAQ”上阅读ReactuseState（）和useRef（），我对一些似乎同时解决了useRef和useState问题的用例感到困惑，我不确定哪种方法是正确的。

从关于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

useRef在您希望跟踪值更改，但不希望触发重新渲染或useffect时非常有用。

大多数用例是当你有一个依赖于值的函数，但是值需要由函数结果本身更新。

例如，假设您想要分页一些API结果：

const [filter, setFilter] = useState({});
const [rows, setRows] = useState([]);
const [currentPage, setCurrentPage] = useState(1);

const fetchData = useCallback(async () => {
  const nextPage = currentPage + 1;
  const response = await fetchApi({...filter, page: nextPage});
  setRows(response.data);
  if (response.data.length) {
    setCurrentPage(nextPage);
  }
}, [filter, currentPage]);

getchData正在使用当前页面状态，但是在成功响应后需要更新当前页面。这是不可避免的过程，但它很容易导致无限循环，也就是React中的最大更新深度超过错误。例如，如果您想在加载组件时获取行，则需要执行以下操作：

useEffect(() => {
  fetchData();
}, [fetchData]);

这是错误的，因为我们在同一个函数中使用状态并更新它。

我们希望跟踪currentPage，但不希望通过其更改触发useCallback或useffect。

我们可以使用useRef轻松解决此问题：

const currentPageRef = useRef(0);

const fetchData = useCallback(async () => {
  const nextPage = currentPageRef.current + 1;
  const response = await fetchApi({...filter, page: nextPage});
  setRows(response.data);
  if (response.data.length) {
     currentPageRef.current = nextPage;
  }
}, [filter]);

我们可以在useRef的帮助下从useCallbackdeps数组中删除当前页面依赖项，这样我们的组件就可以从无限循环中保存下来。

Answer 2

基本上，我们在这些情况下使用UseState，其中state的值应该通过重新渲染来更新。

当您希望在组件的生命周期内保持信息时，您将使用UseRef，因为它不适用于重新渲染。

Answer 3

两者之间的主要区别是：

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

它们之间的共同点是，useState和useRef都可以在重新渲染后记住它们的数据。因此，如果您的变量决定了视图层渲染，请使用useState。否则请使用useRef

我建议读这篇文章。