因此，在具有多个页面的网站中，哪一个使用来自 API 的外部数据，在第一次加载页面时，仅发出一次请求的最佳逻辑方式是什么？所以，例如，我第一次进入页面 ABOUT（使用 React Router），它发出 Axios 请求并加载数据，然后我切换到 HOME 页面，当我回到 ABOUT 时它没有加载数据。
因为我目前所做的是每次页面加载时都会发出请求，这对于用户体验来说非常笨拙。我在 componentDidMount 方法中使用 Axios 发出请求。
React Hooks with Context API 可以帮助解决这个问题吗？
我看过这篇文章，但仍然感到困惑： React rerender every time page is visited
先谢谢了，如果我不能更清楚，对不起！
【问题讨论】：
标签： reactjs axios react-hooks react-state-management context-api
使用 Redux 或类似的全局状态管理工具（例如 Context API）将是解决此问题的一种方法。使用 Redux，您可以将 API 数据存储到全局状态中，然后在您的 componentDidMount 方法中，只有当您对应的全局状态值为空时，您才能运行 Axios 请求。
另一个涉及 Redux 的解决方案是拥有一个无所不在的布局组件，例如 Navbar，负责请求所有 API 数据。如果您将导航栏放置在 React Router 之外，那么当 React Router 将您带到不同的页面时，该组件将不会自行卸载。使用此方法，如果您想在第一次访问页面时加载相关数据，但在会话的剩余部分中保持它，您可以拥有一个依赖于 useLocation().pathname 的 useEffect（来自 react -router-dom) 加载 API 数据，将其存储在全局范围内，并且仅在没有数据时才请求所述数据。
使用全局状态管理的另一个好处是，在大多数情况下，您的 HTTP 代码将从组件中抽象出来并组织到某种类型的“操作”文件夹中，这将使一切更易于管理。
【讨论】：
这可以使用react-router-dom 包中的Link 组件轻松实现。只需将用于在页面之间导航的常规锚标记替换为 <Link to="yourUrl" /> 这样，每次访问不同页面时状态都不会刷新，并且除非您关闭浏览器，否则状态将保持在那里。
【讨论】：
您可以查看缓存 - 它不需要更改当前代码，但仅在设置 axios 时才需要。当您对自上次请求以来几乎没有时间变化的相同数据发出请求时，它将从缓存中提供服务，而不是调用服务器。
axios-cache-adapter 是一个可以在 axios 中处理缓存的库的示例。
【讨论】：