使用 react-router 时持久化 API 数据的最佳方法答案

【问题标题】：Best method of persisting API data when using react-router使用 react-router 时持久化 API 数据的最佳方法
【发布时间】：2020-04-13 09:58:58
【问题描述】：

我当前的 React 应用程序存在延迟问题。正如目前所写的那样，我有一个顶级反应路由器，它在几个受保护的路由之间进行路由。像这样：

export default function IndexRouter(): JSX.Element {
  return (
    <Switch>
      <Route path="/routeA" component={ComponentA} />
      <Route path="/routeB" component={ComponentB} />
      <Route path="/routeC" component={ComponentC} />
       ...
    </Switch>
  );
}

组件 A 从多个 API 调用中加载大量数据，包括多个数据数组和图像。这是通过自定义 Axios 钩子完成的。组件A的大致结构如下：

export default function ComponentA(): JSX.Element {
  const [data, loading, error, fetch] = useAxios(...);
  return (
    <Sub1 />
    <Sub2 />
  );
}
export default function Sub1(): JSX.Element {
  const [data, loading, error, fetch] = useAxios(...);
  const [data1, loading1, error1, fetch1] = useAxios(...);

  return (
    ... more sub-components
  );
}

它是这样嵌套的。

所以当用户使用react-router导航到componentA时，基本上会得到很多数据。我的问题是用户经常离开组件A（这是主页），每次都回到组件A。每次，componentA 都会加载之前加载的所有数据，只需要用户进行一些细微的更改。这种重复加载会导致导航期间出现大量延迟。

我觉得我无法利用 useMemo 或 useCallback，因为在 react-router 导航期间正在卸载 componentA。我不觉得在 localStorage 中持久化数据是一个很好的长期解决方案。我也觉得将 componentA 中的所有深层 API 调用抽象为更高阶的组件也不是一个很好的解决方案，并且会导致 prop 钻孔的代码混乱。

所以我的问题是如何解决这个问题？

【问题讨论】：

标签： reactjs react-router axios react-hooks

【解决方案1】：

将获取的数据保存到redux中，或者在顶部创建一个CacheContext，并为axios创建拦截器以保存响应的获取数据，尝试在请求中使用缓存

【讨论】：

【解决方案2】：

我认为在 localStorage 中持久化数据不是一个很好的长期解决方案

我不认为在这个用例中使用 localStorage 有什么问题。

也不是一个很好的解决方案，并且会导致带有道具钻孔的代码混乱

React 提供了一种轻松的方式来处理道具钻孔，它是语言的原生和内置的，它被称为 Context API。对此有一些警告，因为这需要优化，如果使用不当，可能会导致issues，例如（但不限于）不必要的重新渲染。像MobX 这样的状态管理库为您提供了一种方法来以一种不那么痛苦的方式处理这个问题，只需将您的组件连接到状态树即可，该状态树可以保存在您的本地存储中。

解决此问题的另一种方法是简单地缓存 API 的响应，有像 SWR (stale-while-revalidate) 这样的库可以为您简化此操作。

来自 SWR 文档的 sn-p：

SWR 首先从缓存中返回数据（stale），然后发送 fetch 请求（revalidate），最后再次携带最新数据。

库中还有一些参数可让您决定何时重新验证。

【讨论】：