【React18+TypeScript】code with mosh - React: Intermediate Topics [1]

1、准备工作

1-1 克隆项目

从GitHub将初始项目克隆

git clone https://github.com/mosh-hamedani/react-course-part2-starter.git

如果报错Couldn‘t connect to server
查询代理服务器端口号，如图搜索代理服务器设置，点击代理服务器的编辑查看

git config --global http.proxy http://127.0.0.1:7897
 
git config --global https.proxy http://127.0.0.1:7897

之后再此克隆代码，问题应该解决了

取消配置

git config --global --unset http.proxy

git config --global --unset https.proxy

克隆项目后，安装项目依赖，在项目文件夹执行

npm i

1-2 问题分析

1. 未处理组件卸载时的请求取消，严格模式下组件会渲染两次，未取消的请求会导致重复数据获取
2. 关注点分离不足，数据获取逻辑直接嵌入组件
3. 错误处理与用户体验局限，请求失败后仅显示错误，无自动重试逻辑
4. 后端数据更新时，前端无法自动同步最新数据，需用户手动刷新页面
5. 无缓存机制
6. 代码维护成本高

解决方案： React Query

• 简化数据获取：内置请求取消、重试、缓存等机制
• 减少样板代码：无需手动管理loading/error/数据状态
• 提升性能：通过智能缓存减少网络请求
• 轻量级替代：相比Redux更简单，专注数据获取场景

1-3 配置React Query

1. 安装包

npm i @tanstack/react-query

2. 配置过程

在 main.tsx 文件顶部添加导入代码

import {
   
    QueryClient, QueryClientProvider } from "@tanstack/react-query";

创建QueryClient实例

const queryClient = new QueryClient();

使用 QueryClientProvider 包装应用根组件：

<QueryClientProvider client={
   
   queryClient}>
	<App />
</QueryClientProvider>

1-4 连接自己的仓库

Gitee或者GitHub仓库

// 1.删除原有连接
git remote rm origin
// 2.新建连接
git remote add origin 自己的仓库地址

2、React Query 数据获取

2-1 useQuery使用

使用useQuery实现

1. 获取数据-data
2. 错误处理-error
3. 加载处理-isLoading

TodoList 组件

import {
   
    useQuery } from "@tanstack/react-query";
import axios from "axios";
import React, {
   
    useEffect, useState } from "react";

interface Todo {
   
   
  id: number;
  title: string;
  userId: number;
  completed: boolean;
}
const TodoList = () => {
   
   
  const fetchTodos = () =>
    // 使用 axios 发送 GET 请求
    // 指定泛型类型为 Todo[]，确保类型安全
    axios
      .get<Todo[]>("https://xjsonplaceholder.typicode.com/todos")
      .then((res) => res.data);

  const { data: todos, error, isLoading, } = useQuery<Todo[], Error>({
    // 缓存唯一标识符
    queryKey: ["todos"], // 缓存键
    // 数据获取函数（返回 Promise）
    queryFn: fetchTodos,
  });
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;

  return (
    <ul className="list-group">
      {
   
   /* todos 可能为 undefined，需使用可选链 */}
      {todos?.map((todo) => (
        <li key={todo.id} className="list-group-item">
          {todo.title}
        </li>
      ))}
    </ul>
  );
};

export default TodoList;