react-query的介绍和使用

一、 react-query介绍

1.1 react-query是什么

react-query是一个异步状态管理的hook,内置了loading,error等状态。

1.2 react-query的作用

• 封装了loading、error等方便使用,减少代码量
• 多个组件请求同一个query时只发送一个请求
• 缓存更新和时效策略

1.3 react-query和redux的区别

react-query和redux都能进行状态管理和异步数据的处理,react-query更偏向于服务器之间的异步数据的管理

1.4、概览

没使用react-query之前,你的代码可能是这样的

import{ useEffect, useState, useMemo, memo }from'react';constfetchList=()=>{returnnewPromise((resolve, reject)=>{setTimeout(()=>{const list =[{id:'1',name:'banana'},{id:'2',name:'orange'},{id:'3',name:'apple'},{id:'4',name:'strawberry'},{id:'5',name:'grape'},];resolve({data: list })},1000);});};functionList(){const[list, setList]=useState([]);const[loading, setLoading]=useState(false);useEffect(()=>{setLoading(true);fetchList().then(res=>{setLoading(false);setList(res?.data)}).catch(err=>setLoading(false))},[]);const renderList =useMemo(()=>{return list.map(l=><div key={l.id}>{l.name}</div>);},[list]);return(<div className='list'>{loading ?'loading': renderList}</div>);}functionApp(){return<div className='app'><List/></div>};exportdefaultmemo(App);

使用react-query

import{ memo }from'react';import{ useQuery, QueryClientProvider, QueryClient }from'react-query';constfetchList=()=>{returnnewPromise((resolve, reject)=>{setTimeout(()=>{const list =[{id:'1',name:'banana'},{id:'2',name:'orange'},{id:'3',name:'apple'},{id:'4',name:'strawberry'},{id:'5',name:'grape'},];resolve({data: list })},1000);});};functionList(){const{ isLoading, error, data }=useQuery('getListData',()=>fetchList().then(res=> res.data));if(error){return'An error has occurred: '+ error.message
  }if(isLoading){return'data is loading.'}return data.map(l=><div key={l.id}>{l.name}</div>);}functionApp(){const queryClient =newQueryClient();return<div className='app'><QueryClientProvider client={queryClient}><List /></QueryClientProvider></div>};exportdefaultmemo(App);

多个组件请求同一个query只会进行一次请求

functionList(){const{ isLoading, error, data }=useQuery('getListData',()=>fetchList().then(res=> res.data));if(error){return'An error has occurred: '+ error.message
  }if(isLoading){return'data is loading.'}return data.map(l=><div key={l.id}>{l.name}</div>);}functionList1(){const{ isLoading, error, data }=useQuery('getListData',()=>fetchList().then(res=> res.data));if(error){return'An error has occurred: '+ error.message
  }if(isLoading){return'data is loading.'}return data.map(l=><div key={l.id}>{l.name}</div>);}functionApp(){const queryClient =newQueryClient();return<div className='app'><QueryClientProvider client={queryClient}><List /><List1/><ReactQueryDevtools initialIsOpen={false} position='top-right'/></QueryClientProvider></div>

List和List1都使用了getListData这个query,但最终只会请求一次

二、基础使用

2.1 useQuery

useQuery接收两个参数,第一个是唯一表示key,第二个是一个fetch的异步函数。key是一个唯一的字符串,用来标识query,key还可以是个数组,存放query依赖的一些变量,类似于useMemo和useCallback,当依赖发生变化时会重新发起请求

const[id, setId]=useState(0)const{ isLoading, error, data, state, isFetching }=useQuery(['getListData', id],()=>fetchList(id).then(res=> res.data));if(error){return'An error has occurred: '+ error.message
  }if(isLoading){return'data is loading.'}return<div>{data.map(l=><div key={l.id}>{l.name}</div>)}<button onClick={()=>setId(id +1)}>按钮</button></div>;

2.2 useMutation

useMutation的主要作用是清除缓存,更新和删除数据

const queryClient =useQueryClient();// Mutationsconst mutation =useMutation(removeList,{onSuccess:()=>{// Invalidate and refetch
       queryClient.invalidateQueries('getListData')},});<button onClick={()=> mutation.mutate({id:'0',text:'文字'})}>按钮</button>

2.3 使用devtools

import{ ReactQueryDevtools }from'react-query/devtools';functionApp(){const queryClient =newQueryClient();return<div className='app'><QueryClientProvider client={queryClient}><List /><List1/><ReactQueryDevtools initialIsOpen={false} position='top-right'/></QueryClientProvider></div>};

2.4 乐观更新

乐观更新就是在一些请求或者数据处理没有结束的时候，提前给用户显示理想的结果，如果失败就回滚更新

constuseAddConfig=(queryKey)=>{// 获取当前QueryClient的实例const queryClient =useQueryClient()return{// 当mutate被调用时触发asynconMutate(target){// 获取当前数据快照，用于错误时回滚更新const previousItems = queryClient.getQueryData(queryKey)// 乐观更新为新值
      queryClient.setQueryData(queryKey,(old)=>{return(target, old)=>(old ?[...old, target]:[])})// 这个返回值会作为最后一个参数传递给onError和onSettledreturn{ previousItems }},// 成功回调 清除缓存onSuccess:()=> queryClient.invalidateQueries(queryKey),// 失败回调onError(error, newItem, context){// 当前queryKey的数据回滚
      queryClient.setQueryData(
        queryKey,
        context.previousItems
      )},// 无论错误或者成功都会触发，此例子没有使用onSettled(){}}}

传送门：react-query官网