如何在 react 应用程序中持久化数据以最大程度地减少服务器调用

Question

在我的一个ReactJS页面中，有两个下拉菜单，在选择一个或另一个的值时，它会调用服务器API来获取数据。为了获取数据，我正在使用useEffect钩

子，如下所示

export const useFetch = () => {
const [state, setState] = useState({ data: null, loading: true });
useEffect(() => {
setState(state => ({ data: state.data, loading: true }));
fetch(url)
.then(x => x.text())
.then(y => {
setState({ data: y, loading: false });
});
}, []);
return state;
};

现在，从下拉菜单中，可以进行一定数量的组合来获取 API 数据，因为选项不是太大，对于任何组合，来自 API 的值都将保持不变，因此我需要防止 API 调用，如果之前获取了相同的组合数据并仅使用以前的组合数据并最大限度地减少我的组件重新渲染(这也是一种情况，如果路线改变，它回来了(。

请建议在这种情况下如何处理。我已经研究了浏览器的localstorage但是如果浏览器/选项卡关闭等，清理localstorage值会有点问题

Answer 1

如果您希望在

• 应用程序启动时保留数据，请使用Redux
• 如果您希望在整个会话中保留数据，请使用sessionStorage(浏览器窗口关闭后将被删除(
• 如果希望数据保留只要有效，请使用localStorage，如果需要，您可以在卸载事件之前清除存储

例：

componentDidMount() {
window.addEventListener('beforeunload', this.handleBeforeunload)
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleBeforeunload)
}
handleBeforeunload() {
localStorage.removeItem('myItem')
}