React之Nextjs & react-query

本文已参与「 新人创作礼 」活动，一起开启掘金创作之路

看标题就知道我今天要讲的就是React技术栈体系的，基于Nextjs中的react-query的应用。

其实我看这个东西也就1天时间，当然可能讲的不是很透彻。

但是就react-query我还是想提供下学习的建议。

或许很多人也不知道react-query为何物，我当时的第一感觉是react-query是一个基于react的query查询组件。但是起名感觉又怪怪的。

也是新公司的历史项目用到的就有React Query 。

新项目框架我负责搭建：但是在技术栈的路线上还是要跟公司的主体保持一致性。

如果你用过Redux，或许你就会感受到React Query ， 他其实是一个全家桶。在Redux，他其实是个数据管理的方式，他中间配套很多中间件例如 （ thunk、Saga、mobox ）等等。

而React-query的强大就在于，他这个库，统统把你想到的都配齐了。

让我欣喜的是，他机会考虑到Saga里面的请求处理，合并。（ Saga其实还是有些晦涩难懂 ）

而React-query那就是开箱即用。一般业界对他的描述是：React-query为 React 缺少的数据获取(data-fetching)库，但是从更广泛的角度来看，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。

在中文翻译文档中有这样的一个介绍：

远程保留在您无法控制或拥有的位置

需要异步 API 进行获取和更新

意味着共享所有权，可以在你不知情的情况下被其他人改变

如果不小心，可能会在应用中变得"过时"

一旦你掌握了应用中服务器状态的本质，你会遇到更多的挑战，例如:

缓存...（这可能是编程中最难的事情）

将对同一数据的多个请求重复数据集合到单个请求中

在后台更新"过时"的数据

知道数据何时"过时"

尽可能快地反映数据更新

分页和延迟加载数据等性能优化

管理服务器状态的内存和 GC

结构化共享并存储查询结果

至于代码方面先放出最为简单的配置：

import { AppProps } from 'next/app';
import {
  QueryClient,
  QueryClientProvider,
} from 'react-query';
let defaultOptions = {
  queries:{
    /*
    staleTime 重新获取数据的时间间隔 默认0 , Infinity 永不过期
    cacheTime 数据缓存时间 默认 1000 * 60 * 5 5分钟
    retry 失败重试次数 默认 3次
    refetchOnWindowFocus 窗口重新获得焦点时重新获取数据 默认 false
    refetchOnReconnect 网络重新链接
    refetchOnMount 实例重新挂载
    enabled 如果为“false”的化，“useQuery”不会触发，需要使用其返回的“refetch”来触发操作
    */
  },//查询配置
  //mutations:{} 用来更新的配置
};
const dexerQueryClient = new QueryClient({
  defaultOptions
}); //默认QueryClient可以为空
//你也可以配置一些通用的处理参数  defaultOptions 如上

function MyApp({
  Component,
  pageProps
}:AppProps){
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  )
}



//第一种写法
import { useQuery } from 'react-query';
import { NextPage } from 'next';
import React, { PureComponent, useContext } from 'react';
const Home: NextPage = () => {
  const { data } = useQuery('repoData', () =>
      fetch('https://api.github.com/repos/tannerlinsley/react-query').then((res) => res.json()),
  );
  return (
    <div>
      <h1>{data.name}</h1>
    </div>
  )
}

//第二种写法  ( 实现了按需加载的逻辑 )
import { useQuery } from 'react-query';
import { NextPage } from 'next';
import React, { PureComponent, useContext } from 'react';
const Home: NextPage = () => {
  const { refetch , data={} } = useQuery('repoData', () =>
      fetch('https://api.github.com/repos/tannerlinsley/react-query').then((res) => res.json()), { enabled: false,}
  );
  return (
    <div>
      <button onClick={refetch}>更新</button>
      <h1>{data.name}</h1>
    </div>
  )
}

其实详细的中文API文档大家可以参考这里。点击这里

PS：react-query 库的设计还是挺人性化的，他其实在性能上为初级工程师提供很多的边界处理，只要你考虑的到，比较适合于业务型的系统开发，如果有非常的极致性能，一级庞大的数据通信细腻度。react-query未必是最好的。还是一句话，存在即合理，合适的才是最好的！我也是探索react-query的路上，等我理解的更深刻的时候，或许我会在补充一篇。