问如何为react js中的所有页面重用API数据？

EN

这个问题的答案取决于你想要的阻力范围。如果您想在每次重新加载时都重做API调用，那么您可以使用Redux之类的东西在多个组件之间共享输出。如果你想让它保存更长时间，你可以使用LocalStorage。请注意，如果您只想临时存储，也可以使用LocalStorage，但您需要添加代码，以便在应用程序加载期间从应用程序接口获取数据。

为了更好地处理获取数据和缓存数据以供下次使用，您可以轻松地使用两个功能强大的库

react-query https://www.npmjs.com/package/react-query

或

swr https://swr.vercel.app/

他们可以管理你获取的数据并为你存储，如果他们有你的数据，它会返回你数据的缓存实例

更新：

如果您想在重新加载页面后保存数据，可以使用两个有用库，它们可以将状态保存到localStorage

对于yo可以使用的简单状态：

use-persisted-state https://www.npmjs.com/package/use-persisted-state

对于复杂的状态，可以使用：

use-persisted-reducer

https://github.com/khakestani/use-persisted-reducer

https://www.npmjs.com/package/use-persisted-reducer

我能想到两种方法-

1. 使用高阶组件或渲染属性模式。这将把API调用逻辑提取到单个位置，然后您可以包装组件以获取数据。有关更多信息，您可以在文档https://reactjs.org/docs/higher-order-components.html

中挖掘

1. 使用Redux和thunk来利用存储和操作。你可以在这里找到redux文档https://redux.js.org