关于react.js:如何在React中优雅的使用Interval轮询

在前端开发中，常常会应用轮询（setInterval），比方后端异步数据处理，须要定时查问最新状态。然而在用 React Hook 进行轮询操作时，可能会发现 setInterval 没有那么轻松驾驭，明天笔者就来谈谈在我的项目开发中是如何解决 setInterval 调用问题的，以及如何更加优雅的应用setInterval。

问题的引入

先从一个简略的例子开始，为了便于叙述，本文中的案例用一个计数定时器来演示。

import React, {useEffect, useState} from "react";

export default function IntervalExp() {const [count, setCount] = useState(0);
  useEffect(() => {const timer = setInterval(() => {setCount(count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  return (
    <div>
      <p> 以后计数：{count}</p>
    </div>
  );
}

首先应用 useState 定义了一个 count 变量，而后在 useEffect 中，定义了一个名为 timer 的定时器，并在定时器中执行 count+ 1 操作，并在组件卸载时革除定时器。

现实状态下，count 会执行 + 1 操作，并一直的递增。但理论并非如此，count 在变为 1 当前，将不再有任何变动。起因很简略，useEffect 中因为没有将依赖的 count 对象增加到依赖对象数组中，所以它每次拿到的都是老的 count 对象，也就是 0。

办法一：增加依赖数组

import React, {useEffect, useState} from "react";

export default function IntervalExp() {const [count, setCount] = useState(0);
  useEffect(() => {const timer = setInterval(() => {setCount(count + 1);
    }, 1000);
    console.log("更新了", timer);
    return () => clearInterval(timer);
  }, [count]);
  return (
    <div>
      <p> 以后计数{count}</p>
    </div>
  );
}

当把 count 对象退出到依赖数组当前，能够发现定时器当初能够失常工作了。然而留神这里有个坑，在 return 的时候，即组件卸载的时候，肯定要做清理操作，否则你的定时器会执行的越来越快，因为新的定时器会一直生成，但老的定时器却没有 清理。

然而这种形式完满吗？并不然，如果定时器操作的数据蕴含父组件传递的 props，或者是其余的 state，都须要加到依赖数组中，这样做不仅不美观，而且容易出错。同时，这种形式还有个问题，就是定时器要在每次变动时要 从新生成 ，这必然也会有很高的 性能损耗。

办法二：不增加依赖数组的形式（useRef）

useRef 是官网的 hook，应用 useRef 定义的对象有个 current 对象，是能够存储数据的，而且存储的数据能够被批改，并在组件的每一次渲染中，都能从 current 中拿到最新的数据。基于 ref 的这一个性，实现一个名为 useInterval 的自定义 hook。

import {useEffect, useRef} from "react";

export const useInterval = (cb: Function, time = 1000) => {const cbRef = useRef<Function>();
  useEffect(() => {cbRef.current = cb;});
  useEffect(() => {const callback = () => {cbRef.current?.();
    };
    const timer = setInterval(() => {callback();
    }, time);
    return () => clearInterval(timer);
  }, []);
};

在这个自定义 hook 中，有回调函数和轮询工夫两个参数。应用 useEffect 把最新的回调函数赋值给 ref.current，这样在第二个 useEffect 中就能从 ref.current 上拿到最新的 callback，而后在定时器中执行它。
在我的项目中如何应用呢？

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

只需引入自定义 hook，并依照下面的格局调用即可。

办法三：更高级的方法（useReducer）☆☆☆

回头看第一个例子，为什么在 useEffect 中不增加 count 就无奈实现想要的定时器成果呢，说白了是因为读取了 state 的数据，而又因为闭包起因拿不到最新的 count 数据，所以导致 interval 操作失败。其实借助 useReducer 就能够在不读取 count 的状况更新 count 数据。

import React, {useEffect, useReducer} from "react";

function reducer(state: { count: number}) {return { count: state.count + 1};
}
export default function IntervalExp() {const [state, dispatch] = useReducer(reducer, { count: 0});
  useEffect(() => {setInterval(() => {dispatch();
    }, 1000);
  }, []);

  return (
    <div>
      <p> 以后计数{state.count}</p>
    </div>
  );
}

在这个案例中，应用 useReducer 定义了一个简略的 count 操作方法，在 interval 中，通过调用 dispatch 办法，胜利更新了 count 数据。useReducer 在须要操作多个 state 的简单业务逻辑场景下能够应用，尽管定义起来麻烦，然而能够实现将组件中的业务逻辑抽离进去，写出更加易于保护的代码，而且在目前这个场景中，useReducer 比下面两个形式解决的更加优雅，也是本文举荐的形式。

总结

hook 是 React 中十分有魅力的一个创造，灵便应用 hook 能够写出更有品质的代码。作者写本文的目标也是因为在理论开发中遇到了这一问题，因而心愿本文能够帮忙到其余开发者。

参考文章：usestate 中的回调函数_React Hooks 中应用 setInterval 的若干办法