Question

仅想知道useRef在示例中的用途是什么：https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables：

function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  // ...
  function handleCancelClick() {
    clearInterval(intervalRef.current);
  }
  // ...
}

我尝试过并且可以在没有useRef的情况下实现相同的效果，

function Timer() {
  const interval = null;

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    interval = id;
    return () => {
      clearInterval(interval);
    };
  });

  // ...
  function handleCancelClick() {
    clearInterval(interval);
  }
  // ...
}

因此反应文档和答案Is useRef Hook a must to set and clear intervals in React?中的谚语“但是如果我们想从事件处理程序中清除间隔，这很有用”，这简直是毫无意义。

Answer 1

只有当您不想在handleCancelClick中停止计时器并将所有逻辑都保留在单个useEffect中时，这才是很好的情况（这确实很少见）。

请参阅，如果在运行计时器和useState之间进行了任何重新渲染（由于任何handleCancelClick条目已更改或道具已更改），则将获得该变量const interval = null;，并且什么也不会发生点击（clearTimeout(null);无效）。

在不保留渲染器之间的数据的情况下看不到如何处理。

为什么在此React示例中使用useRef？只是为了概念演示？

1 个答案: