React常用库学习

这个系列主要是更新一些在学习react常用库的内容，比如Redux React Query React Router等

React Query 使用

React Query是一个用于管理react项目中的远程状态的库（一些需要请求的远程数据的管理）

基本使用方法

导入库进行基本配置

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
    },
  },
});

在App组件中的最外层使用

<QueryClientProvider client={queryClient}>

对整个项目提供上下文环境，让所有组件都可以访问到Query实例并且在全文中可以使用由react query提供的hooks

常见hooks和函数

usequery钩子

用这个hook可以对某个或者某些数据远程管理进行基本的配置以及对应的获取函数

useQuery({
    queryKey: ["key"],      // 查询的唯一标识
    queryFn: async () => {}, // 获取数据的函数
    staleTime: 1000,        // 数据保持新鲜的时间（毫秒）
    cacheTime: 5 * 60000,   // 数据缓存时间
    retry: 3,               // 失败重试次数
    enabled: boolean,       // 是否启用查询
    refetchOnWindowFocus: true, // 窗口获得焦点时是否重新获取
    refetchOnMount: true,   // 组件挂载时是否重新获取
    onSuccess: (data) => {}, // 成功回调
    onError: (error) => {}, // 错误回调
});

这里的querykey作为一个唯一的标识来在后续获取此数据过程中使用进行提取

queryFn是指用哪个函数来进行远程的数据请求

useMutation

使用这个钩子是修改用于修改一些数据

const { mutate, isLoading } = useMutation({
    mutationFn: 修改数据的函数,
    onSuccess: 成功回调,
    onError: 错误回调
});

触发mutate函数以后就会对数据进行一些修改，具体的修改方式取决于mutationFn中的函数

queryClient.invalidateQueries

一般配合useMutation进行使用，在修改数据成功以后往往需要进行一些UI的更新，这个时候就需要使用这个函数来告诉reactquery让原有的数据失效并且更新数据

queryClient.invalidateQueries({
    queryKey:["cabins"]
});

这里的querykey就是之前usequery设定的querykey，用于告诉reactquery哪部分需要重新获取数据