React-Query初识 - 浅尝辄止

前言：

在React项目的实际运用中，经常出现跨组件的状态管理问题，现有解决方案像Conetxt,Redux都是很常见的，但是基于Context的局限性，Redux状态树的复杂度而言，是否有更贴合React16.8+的hook版本的状态管理方案呢？

正文

与其说react-query是一种状态管理方案，它更准确的描述应该是一种获取服务器数据的库，只不过它拥有了获取，缓存，同步和更新服务器状态的能力，通过简单的key-value的map映射，形成了一个个的数据缓存，再通过内置的API让这些数据做到了全局的共享。

• API
  • useQuery顾名思义是从服务器获取数据的hook，通常用于GET请求，值得注意的是他的返参十分便利

  /**
    * isLoading: (Boolean) 获取数据的异步loading
    * isError: (Boolean) 获取数据失败的状态
    * isSuccess: (Boolean) 获取数据成功的状态
    * data: (any) 获取的数据结果
    * queryKey: (string | []) key值，用于定义识别缓存的query数据,改值如果有更新（类似Effect的第二个参数）则重新执行异步获取数据操作
    * fetchTodoList: (() => Promise()) 异步操作
    */
  const {isLoading, isError, isSuccess, data} = useQuery(queryKey, fetchTodoList)
  

  • useMutation修改服务器数据时使用，通常用于POST PATCH DELETE，通常用于修改useQuery定义的数据

  /**
    * mutation与useQuery返参一直
    * onMutate 异步执行的数据处理函数，target为当前处理结果
    * onSuccess 异步执行成功后的操作
    * onError 异步执行失败后的操作，context参数为onMutate返回的对象
    */
  const mutation = useMutation(
      newTodo => axios.post('/todos', newTodo)，
      {
          onMutate: (target) => any,
          onSuccess: () => void,
          onError: (err, newItem, context) => void,
      }
  )
  

  • useQueryClient获取query实例对象
    • invalidateQueries(key)重新获取执行key数据的值
    • setQueryData(key, (old) => any)设置修改key的值
    • getQueryData(key)获取key的值