setInterval 和 hooks 撞在一起，翻车了~

前言

事情是这样子的，周末加班赶项目，有个同步数据功能为异步进程，需要写个轮询来获取同步结果。这功能简单啊，轮询我熟啊！

一个 setInterval 就可以解决问题。于是，我不假思索写下的功能代码，测试都懒得测直接部署移测。（这种行为是愚蠢而不负责任的，千万不要效仿~）

功能代码是使用 react hooks 写的，setInterval 并没有如我所愿的实现轮询的功能，然后我怀疑人生了？？？

问题分析

由于需求很急，于是我把代码暂时改成了 Class 组件的形式，重新发了一版，问题便解决了~

但是事情不能这样子过去，我得思考下，为什么 setInterval 和 hooks 一起使用就滑铁卢了呢？

接下来我们手动实现一个计时器例子来说明下，hooks 里使用 setInterval 和 clearInterval 失效的根本原因。

function Counter() {  const [count, setCount] = useState(0);    useEffect(() => {    let id = setInterval(() => {      setCount(count + 1);    }, 1000);    return () => clearInterval(id);    });    return <div>{count}</div>;}

你觉得这个代码有问题吗？请思考几分钟，再接着往下看！

实际上上面的代码是有问题的，React 默认会在每次渲染时，都重新执行 useEffect。而调用了 clearInterval 后重新 setInterval 的时候，计时会被重置。如果频繁重新渲染，导致 useEffect 频繁执行，计时器可能压根就不会被触发！定时器也就失效了。这也是我写的轮询没有生效的原因！

解决问题

使用过 hooks 的朋友，一定知道 useEffect 有第二个参数，传入一个依赖数组，可以在依赖数组发生变更时候再次重新执行 effect，而不是每次渲染都执行。

那么如果我们传入一个空数组 [] 作为依赖，这样子组件在挂载时候执行，在组件销毁时候清理，是不是就可以解决问题呢？

function Counter() {  let [count, setCount] = useState(0);
  useEffect(() => {    let id = setInterval(() => {      setCount(count + 1);    }, 1000);    return () => clearInterval(id);  }, []);
  return <div>{count}</div>;}

但实际上呢，计时器更新到 1 之后，就停止不动了。计时器还是失败了，无法实现轮询功能。

为何现象与预期不符呢？其实仔细观察，你会发现，这是个闭包的坑！

useEffect 使用的 count 是在第一次渲染的时候获取的。 获取的时候，它就是 0。由于一直没有重新执行 effect，所以 setInterval 在闭包中使用的 count 始终是从第一次渲染时来的，所以就有了 count + 1 始终是 1 的现象。是不是恍然大悟！如果在 hooks 中想要获取一个有记忆的 count，这时候就会想起使用 useRef 了，也该它登场了~

useRef，有记忆的 hooks

通过上面的两次失败，我们总结两个我们发现的矛盾点：

1、useEffect 是没有记忆的，每次执行，它会清理上一个 effect 并且设置新的 effect。新的 effect 获取到了新的 props 和 state；

2、setInterval 是不会忘记的，它会一直引用着旧的 props 和 state，除非把它换了。但是如果它被换掉了，就会重新设置时间了；

麻蛋，这水火不容啊，还好我知道有个 hooks 是有记忆的，那就是 useRef。

如果在 effect 重新执行时，我们不替换计时器，而是传入一个有记忆的 savedCallback 变量，始终指向最新的计时器回调，是不是问题就解决了呢？

我们的方案大概是这样的：

• 设置计时器 setInterval(fn, delay)，其中 fn 调用 savedCallback。

• 第一次渲染，设置 savedCallback 为 callback1
  

• 第二次渲染，设置 savedCallback 为 callback2
  

• ......

我们试着使用 useRef 重写一下：

function Counter() {  let [count, setCount] = useState(0);  const savedCallback = useRef();    function callback() {    // 可以读取到最新的 state 和 props    setCount(count + 1);  }    // 每次渲染，更新ref为最新的回调  useEffect(() => {    savedCallback.current = callback;  });
  useEffect(() => {    let id = setInterval(() => {       savedCallback.current();    }, 1000);    return () => clearInterval(id);  }, []);
  return <div>{count}</div>;}

一方面传入了[]，我们的 effect 不会重新执行，所以计时器不会被重置。另一方面，由于设置了 savedCallback ref，我们可以获取到最后一次渲染时设置的回调，然后在计时器触发时调用。这下数据都有记忆了，问题被解决了，不过这也太麻烦了，可读性很差！

接下来我们抽取一下逻辑，自定义一个 hooks 叫 useInterval 来代替 setInterval 的使用，保持使用方式一致。

useInterval

虽然上面的代码有点罗里吧嗦的，但是 hooks 有个强大的能力就是可以将一些逻辑提取出来，重组抽象为一个自定义 hooks，以便逻辑的复用。

我希望我们的代码最后是下面这样子的：

function Counter() {  const [count, setCount] = useState(0);
  useInterval(() => {    setCount(count + 1);  }, 1000);
  return <div>{count}</div>;}

于是我们把逻辑提取自定义了一个 hooks，为了语义化更好，我们命名为 useInterval

function useInterval(callback) {  const savedCallback = useRef();
  useEffect(() => {    savedCallback.current = callback;  });
  useEffect(() => {    function tick() {      savedCallback.current();    }
    let id = setInterval(tick, 1000);    return () => clearInterval(id);  }, []);}

这里延时值是写死的，我们需要参数化，考虑到，如果 delay 变更了，我们也是要重新启动计时器的，所以要将 delay 放在 useEffect 的依赖中。改造一下：

function useInterval(callback,delay) {  const savedCallback = useRef();
  useEffect(() => {    savedCallback.current = callback;  });
  useEffect(() => {    function tick() {      savedCallback.current();    }
    let id = setInterval(tick, delay);    return () => clearInterval(id);  }, [delay]);}

好啦，现在我们不需要再关注这一堆罗里吧嗦的逻辑了，在 hooks 中使用定时器，只需要使用 useInterval 代替 setInterval 即可。

但是如果你想要暂停计时器呢？很简单我们只需要改一下 delay 的逻辑，当 delay 为 null 时，不设置计时器即可，我们再改造一下：

// 最终版function useInterval(callback,delay) {  const savedCallback = useRef();
  useEffect(() => {    savedCallback.current = callback;  });
  useEffect(() => {    function tick() {      savedCallback.current();    }
     if (delay !== null) {      let id = setInterval(tick, delay);      return () => clearInterval(id);    }  }, [delay]);}
function Counter() {  const [count, setCount] = useState(0);  const [delay, setDelay] = useState(1000);  const [isRunning, setIsRunning] = useState(true);
  useInterval(() => {    setCount(count + 1);  }, isRunning ? delay : null);
  return <div>{count}</div>;}

到现在，我们的 useInterval 可以处理各种可能的变更了：延时值改变、暂停和继续，可比原来的 setInterval 强大很多了！

总结

Hooks 和 Class 是两种不同的编程模式，我们在使用 Hooks 时候可能会遇到一些奇怪的问题，但是不要慌，我们需要的是发现问题的根本原因，然后改变思维去解决它，而不是使用旧有思维。

最后，感谢您可以读到这里，我去改我的轮询代码去了，回见！