Question

我目前正在了解useRef挂钩及其用法。据我了解，访问DOM是一个非常简单的用例。第二个用例是ref的行为类似于类组件中的实例字段。 react docs提供了一个设置和清除点击处理程序中的时间间隔的示例。我想知道，如果不需要从单击处理程序中取消时间间隔，是否可以使用如下所示在useEffect中声明的局部变量来设置和清除间隔？还是使用文档中提到的ref始终是采用的方法？

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

Answer 1

为stated at the docs you shared;

如果我们只想设置一个时间间隔，则不需要参考（id可能是效果的局部值）。

  useEffect(() => {
    const id = setInterval(() => {
      setCounter(prev => prev + 1);
    }, 1000);
    return () => {
      clearInterval(id);
    };
  });

但是如果我们想从事件处理程序中清除间隔，这将很有用：

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

Answer 2

我认为该示例仅用于说明useRef的工作方式，尽管我个人找不到useRef的许多用例，除非在<input ref={inputEl} />中，其中inputEl是由useRef定义的。如果要定义类似组件实例变量的内容，为什么不使用useState或useMemo？我也想实际学习（Why using useRef in this react example? just for concept demostration?）

至于反应文档示例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);
  }
  // ...
}

useRef Hook是否必须在React中设置和清除时间间隔？

2 个答案: