RQ 能干的事儿多着呢 ~

而且，React Query 是用 TypeScript 写的，也可以与 React Native 结合使用，开箱即用，基本不需要任何配置，主要支持以下的一些 Features：

• 缓存：每次查询后，数据将在可配置的时间内缓存，并可在整个应用程序中重复使用。
• 取消查询：可以取消查询，并在取消后执行操作。
• 乐观更新：在突变时，可以轻松更新状态，从而为用户提供更好的用户体验。如果突变失败，还可以轻松恢复到之前的状态。
• 并行查询：如果需要同时执行一个或多个查询，可以毫无压力地执行，也不会影响缓存。
• 依赖查询：有时，我们需要在另一个查询完成后再执行另一个查询。React Query 可让这一切变得简单，并避免嵌套 Promise。
• 分页查询：有了 React Query，这种用户界面模式变得更加简单。你会发现，使用分页 API、更改页面和渲染获取的数据都非常简单。
• 无限查询：React Query 使另一种用户界面模式变得更加简单。你可以在用户界面中实现无限滚动，相信 React Query 会让你在获取数据时更加轻松。
• 滚动恢复：你是否有过这样的经历：从一个页面导航出去，当导航回来时，发现页面已经滚动到了导航之前的位置？这就是滚动恢复，只要缓存了查询结果，它就能正常工作。
• 数据重新获取：需要触发数据重新获取？通过 React Query，你只需编写一行代码就能做到这一点。
• 数据预取：有时，你可以提前确定用户的需求和下一步操作。在这种情况下，你可以相信 React Query 可以帮助你提前预取数据并为你缓存。这样，你的用户体验就会得到改善，你的用户也会更开心。
• 跟踪网络模式和离线支持：你是否遇到过用户在使用你的应用程序时失去网络连接的情况？不用担心，因为 React Query 可以跟踪网络的当前状态，如果因为用户失去连接而导致查询失败，那么一旦网络恢复，查询就会重试。

是不是觉得很神奇？有了 React Query，这些日常需要大量第三方库支持和封装的功能一把给你梭哈了，可以大大减少模板代码量，提升代码的易读性，让你的页面如丝般顺滑。

使用 React Query

本系列将使用 React18.x + TypeScript 来学习 React Query，并且使用 vite 新建项目：

作者：_你当像鸟飞往你的山
链接：https://juejin.cn/post/7277495542044573750
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。