ReactQuery(一) install 和 快速上手 [译]

735 阅读3分钟

出于对reactQuery的兴趣,阅读文档的同时,顺便翻译出来,在其介绍中说的一些思想还是可以参考的,其主要作用就是实现UI,客户端state,服务端state分离,精细化管理服务端的各种状态. 后面会翻译和写一些实践的文章, 第一次发文章, 不足之处还请各位哥哥多多担待TT

install

npm i react-query

// or

yarn add react-query

// CDN 方式引入

<script src="https://unpkg.com/react-query/dist/react-query.production.min.js"></script>

React Query 与 React v16.8+ 兼容,可以与 ReactDOM 和 React Native 一起使用。基于Promise,所以可以与任何异步数据获取客户端一起使用!包括GraphQL


译者注: 为什么把请求的数据缓存(请求返回所需的数据)叫做 query(查询) 在web项目中构成错综复杂的页面和交互逻辑,有三个要素:UI,客户端State,服务器State

UI:负责组件的展示样式,用户最直接的接触

客户端State:用于组件之间定义,传递的一些直接/中间状态

服务端State:前台交互加上后台数据实现了web项目健壮且强大的目标

UI和State可以说是再常见不过,例如刚开始学习react做的todoList,常用的input受控组件等等。

服务器数据:在前后端协同开发的过程中,前端最常用的操作就是拿着后端给的接口文档,写请求函数,发送请求,获取响应数据,渲染到页面。回顾做过的种种操作,一个项目几十个接口,就算页面交互玩儿出花来,整个项目还是由这几十个接口来回调用实现的各种复杂功能。

一个web应用项目,随着时间推移,代码复用性提高随之带来的是代码越写越精简,此时就应该思考,在这几十个接口对应的请求函数中,请求的数据可以复用吗?复用之后怎么保证会复用的数据是服务端最新的?在一些逻辑上级联性的操作可以预先请求节约下一次相同请求的时间吗?

这里请求数据缓存且可复用,引出以下介绍React Query核心概念:

Queries:查询,在一个又一个请求缓存中查询当前组件需要的数据并渲染。

Mutations:更新了请求参数强制重置请求数据。

Query Invalidation :同时可以查询此请求数据是否已经过期,


快速上手

以下案例简明介绍了ReactQuery的三个核心概念:

这三个概念构成了ReactQuery绝大多数核心功能:

import {
   useQuery,
   useMutation,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { getTodos, postTodo } from '../my-api'
 
 // Create a client
 const queryClient = new QueryClient()
 
 function App() {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>
   )
 }
 
 function Todos() {
   // Access the client
   const queryClient = useQueryClient()
 
   // Queries
   const query = useQuery('todos', getTodos)
 
   // Mutations
   const mutation = useMutation(postTodo, {
     onSuccess: () => {
       // Invalidate and refetch
       queryClient.invalidateQueries('todos')
     },
   })
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
 
       <button
         onClick={() => {
           mutation.mutate({
             id: Date.now(),
             title: 'Do Laundry',
           })
         }}
       >
         Add Todo
       </button>
     </div>
   )
 }
 
 render(<App />, document.getElementById('root'))

语雀掘金连更