网络 && 数据相关:
useMutation
为请求设置timeout
路由相关:
useLocation
Link,作为TSX的跳转
defineConfig,集中式路由处理
react-query
为什么会存在react-query? react-query解决了什么?
react-query是前端请求中间件————对请求结果进行拦截处理,提供一系列简单易用的功能
功能点主要包括
- 请求管理 -> request && poll && retry && infinite loading // 提供在网络重连, 窗口focus等状态下的reqeust hook
- 状态管理 -> 对请求进行缓存,放入client side的memory中,便于组件通信
其卖点在于
- 封装 缓存
- 封装 轮询请求
- 封装 请求失败处理
- 封装 请求结果的mutation处理
可通过包管理器额外安装依赖devtools,嵌入到项目中,拥有更完善的开发流程体验
核心API
- useQuery
- QueryClient 基础配置
- useQueryClient 对请求结果进行get和set,作为缓存
- .getQueryData
- .setQueryData
- useMutation 对数据的CURL操作,在这里进行
文档参考: https://juejin.cn/post/7139436983968874504#heading-18