专栏目录: 全网最细 React-Query源码探秘 - 不月阳九的专栏 - 掘金 (juejin.cn)
前言
大家好这里是阳九 一个坚持"万物皆可手写"理念的初级码农
最近React-Query的使用率越来越高,公司也开始准备将其使用在项目中, 本着用了就要搞懂的原则,我抽空去扒了扒它的源码,在这里给大家进行一个讲解
React-Query:一个集合了网络请求和状态管理的工具
我们可以使用useQuery钩子 发起请求,然后将请求来的数据缓存,其他组件想使用数据时,就可以直接从缓存中拿取,减少网络请求。
可以简单的理解为 axios+Redux的简易组合版本,大大减少了请求相关的代码量.
具体的使用大家可以自行去官网查看- react-query.tanstack.com
本专栏适合
- 使用过React-Querry的前端同学
- 对Promise,观察者模式,面向对象比较熟悉的同学
如果以上两点大家觉得还不熟,或者你只是一个纯纯初学者,可以先去补一补前置知识,当然这些都不难,相信一年经验的同学都能轻松搞定
架构分析
React-Query的架构总体分为四大部分
QueryClient, QueryCache, Query, QueryObserver
- 当我们初始化React项目时,会先全局生成一个QueryClient,用于提供封装好的请求方法,并使用React.context分享给App下所有的组件
- QueryClient上会挂载一个QueryCache,用来保存和管理所有的Query
- Query用于保存管理数据和请求状态,每个请求回来的数据都会new一个Query并保存在上面
- 每个useQuery钩子,都会给组件创建一个QueryObserver,用于监听Query中数据的变化,通知组件进行更新
React-Query主体结构图
QueryObserver通过组件观察Query示意图
接下来我们会分篇来详细讲解React-Query的执行流程
