React-Demo：学习自定义hook实现60s定时刷新接口

### 简介

在实际开发中，我们经常需要每隔一段时间从服务器获取数据，比如轮询获取服务器上的最新消息、定时刷新页面上的数据等。

在React中，实现定时刷新接口的传统方法是使用`setInterval()`函数。但是，这种方法存在一些缺点：

* 难以管理多个定时器。随着应用越来越复杂，定时器的数量也会越来越多，这可能会导致代码难以管理和维护。
* 难以取消定时器。当我们不再需要定时器时，需要手动取消它，否则它将一直运行下去，这可能会浪费资源。

### 自定义hook

自定义hook是React中的一种新特性，它允许我们创建自己的hook，这些hook可以像内置hook一样在组件中使用。自定义hook可以解决上面提到的`setInterval()`函数的缺点。

要创建自定义hook，我们需要创建一个以`use`开头的函数，该函数接受一个参数，即hook的依赖项。依赖项是一个数组，包含所有可能导致hook重新运行的值。

以下是一个自定义hook的例子，它可以实现每隔60秒刷新一次接口：

import { useState, useEffect } from "react";

const useInterval = (callback, delay) => {
const [count, setCount] = useState(0);

useEffect(() => {
const timer = setInterval(() => {
setCount((count) => count + 1);
}, delay);

return () => {
  clearInterval(timer);
};

}, [delay]);

useEffect(() => {
if (count > 0) {
callback();
}
}, [count, callback]);
};

export default useInterval;

### 使用自定义hook

我们可以通过以下步骤使用自定义hook来实现每隔60秒刷新一次接口：

1. 在组件中导入自定义hook。
2. 在组件的`useEffect()`函数中调用自定义hook，并将要刷新的接口作为参数传递给它。
3. 在自定义hook的回调函数中调用要刷新的接口。

以下是一个使用自定义hook来实现每隔60秒刷新一次接口的例子：

import useInterval from "./useInterval";

const MyComponent = () => {
const [data, setData] = useState([]);

useInterval(() => {
fetch("https://example.com/api/data")
.then((res) => res.json())
.then((data) => setData(data))
.catch((error) => console.error(error));
}, 60000);

return

export default MyComponent;

### 结语

自定义hook是一种非常强大的工具，它可以帮助我们创建更简洁、更可维护的代码。通过使用自定义hook，我们可以轻松地实现定时刷新接口，而无需担心管理多个定时器和取消定时器等问题。