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