javascript - 如何在 React 应用程序中保留数据以最小化服务器调用

Question

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

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
• 如果您希望为整个 session 保留数据，请使用 sessionStorage(浏览器窗口关闭后将被删除)
• 如果您希望数据在有效期内一直保留，请使用 localStorage，如果需要，您可以在beforeUnload 事件 上清除存储

例子:

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeunload)
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeunload)
  }

  handleBeforeunload() {
      localStorage.removeItem('myItem')
  }