定期触发反应效果

Question

考虑以下简单的 React 组件，其效果是获取一些数据并将其保存到组件状态：

function MyComponent(props) {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const res = await fetch("data.json");
setData(await res.json());
};
fetchData();
}, []);
return (
<></>
)
}

将此效果设置为定期运行(例如每分钟运行一次(的正确方法是什么？

这是否像用setInterval(fetchData, 60)替换fetchData()一样简单，或者我应该考虑其他特定于 React 的考虑因素？

Answer 1

用 setInterval(fetchData， 60( 替换 fetchData(( 一样简单吗？

是的。

只需确保在组件卸载时执行clearInterval(返回useEffect()(。

useEffect(() => {
const fetchData = async () => {
const res = await fetch("data.json");
setData(await res.json());
};
const t = setInterval(fetchData, 60000);
return () => clearInterval(t); // clear
}, []);

Answer 2

我应该考虑其他特定于 React 的注意事项吗？

只是为了 Joseph 的答案的完整性，您应该考虑记住组件的子组件，否则它将在每个间隔重新渲染它们：

//                         v Notice the children
function MyComponent({ children }) {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const res = await fetch('data.json');
setData(await res.json());
};
const interval = setInterval(fetchData, 60000);
return () => clearInterval(interval);
}, []);

//            v Causes children to re-render every interval
return <>{children}</>;
}
export default MyComponent;

可能的情况：

<MyComponent>
<Child />
</MyComponent>

溶液：

// Possible Child
function Child = () => <></>
//                     v Memoization using shallow comparison
export default React.memo(Child);