自定义挂钩SetInterval

Question

我在关注丹·阿布拉莫夫的这篇文章：

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

在本文中，Dan制作了一个自定义的useInterval钩子，以创建一个动态的setInterval。

钩子看起来像这样：

export default function useInterval(callback, delay) {

    //this useInterval function will be called whenever the parent component renders.
    // on render, savedCallback.current gets set to whatever the callback is, if the callback 
    // has changed

  const savedCallback = useRef();
  console.log("called")

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  /**
   * Likewise, the set interval is set off,
   * and if delay is 
  */
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => {
          console.log("clearEed!")
        clearInterval(id);
      }
    }
  }, [delay]);
}

但有一部分我不明白，那就是：

useEffect(() => {
        function tick() {
          savedCallback.current();
        }
        if (delay !== null) {
          let id = setInterval(tick, delay);
          return () => {
              console.log("clearEed!")
            clearInterval(id);
          }
        }
      }, [delay]);

我理解，如果延迟更改，则调用此useEffect。回调被分配给tick，然后如果延迟不为null，则id被设置为SetInterval，tick和延迟作为参数。这一切都是有道理的。但是接下来发生的事情对我来说很奇怪。我知道当组件卸载时，useffect可以接受return语句，但是为什么我们要清除之前设置的间隔呢？如果有人能把这件事告诉我，我会非常感激的。

特别是，我想帮助您理解以下几行：

if (delay !== null) {
          let id = setInterval(tick, delay);
          return () => {
              console.log("clearEed!")
            clearInterval(id);
          }
        }

我是这样使用它的：

function TimerWithHooks() {
  let [count, setCount] = useState(0);
  let [delay, setDelay] = useState(1000);


  useInterval(() => {
    setCount(count + 1);
  }, delay)

  const handleDelayChange = evt => {
      setDelay(Number(evt.target.value))
  }

  return (
      <>
        <h1>{count}</h1>
        <input value={delay} onChange={handleDelayChange} />
      </>
  );
}

export default TimerWithHooks;

Answer 1

我猜Dan会在组件卸载时清除计时器，但我认为beater会在函数执行后执行此操作。有些东西可以舔这个：

useEffect(() => {
    if (delay !== null) {
      let timerId = setInterval(
          () => {
              savedCallback.current();
              clearInterval(timerId);
          }, 
          delay
      );
    }
  }, [delay]);

Answer 2

效果与清理

反应到底什么时候清理效果？React在组件卸载时执行清理。然而，正如我们之前了解到的，效果对每个渲染都运行，而不仅仅是一次。这就是为什么React在下次运行效果之前还会清除上一次渲染的效果。我们将在下面讨论为什么这有助于避免错误，以及如何选择退出这种行为，以防它在后面造成性能问题。

这意味着每当延迟更改时，该效果将清除以前的效果，因此，它将在每次更改延迟时清除计时器，而不是在组件卸载时清除计时器。这样，我们可以动态调整计时器，而不必担心清除计时器。