如何自动刷新react
使用 useEffect 和 setInterval
在 React 中，可以通过 useEffect 结合 setInterval 实现定时刷新功能。以下是一个示例代码：
import React, { useState, useEffect } from 'react';
function AutoRefreshComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = () => {
// 替换为实际的数据获取逻辑
console.log('Fetching data...');
// 模拟 API 调用
setTimeout(() => {
setData(new Date().toLocaleTimeString());
}, 500);
};
fetchData(); // 初始加载
const intervalId = setInterval(fetchData, 5000); // 每 5 秒刷新一次
return () => clearInterval(intervalId); // 清除定时器
}, []);
return <div>Last updated: {data}</div>;
}
export default AutoRefreshComponent;使用自定义 Hook 封装逻辑
可以将自动刷新的逻辑封装为自定义 Hook，方便复用：
import { useState, useEffect } from 'react';
function useAutoRefresh(interval = 5000) {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = () => {
console.log('Refreshing data...');
// 模拟数据更新
setData(new Date().toLocaleTimeString());
};
fetchData();
const intervalId = setInterval(fetchData, interval);
return () => clearInterval(intervalId);
}, [interval]);
return data;
}
function AutoRefreshComponent() {
const data = useAutoRefresh(3000); // 每 3 秒刷新一次
return <div>Last updated: {data}</div>;
}结合 API 调用实现数据刷新
如果需要从 API 获取数据并自动刷新，可以修改 fetchData 函数：
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
const intervalId = setInterval(fetchData, 10000); // 每 10 秒刷新
return () => clearInterval(intervalId);
}, []);动态调整刷新间隔
可以通过状态管理动态调整刷新间隔：
function DynamicIntervalComponent() {
const [intervalTime, setIntervalTime] = useState(5000);
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = () => {
setData(new Date().toLocaleTimeString());
};
fetchData();
const intervalId = setInterval(fetchData, intervalTime);
return () => clearInterval(intervalId);
}, [intervalTime]);
return (
<div>
<div>Refresh interval: {intervalTime / 1000} seconds</div>
<div>Last updated: {data}</div>
<button onClick={() => setIntervalTime(1000)}>1s</button>
<button onClick={() => setIntervalTime(5000)}>5s</button>
</div>
);
}注意事项
- 确保在组件卸载时清除定时器，避免内存泄漏。
- 对于网络请求，需要考虑错误处理和加载状态。
- 频繁刷新可能会对服务器造成压力，需合理设置间隔时间。
