# react-null

**Repository Path**: shixinde/react-null

## Basic Information

- **Project Name**: react-null
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-12
- **Last Updated**: 2025-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Query Demo 使用指南

这是一个完整的 React Query 学习 demo，展示了 `@tanstack/react-query`、`@tanstack/react-query-devtools` 和 `json-server` 的综合使用。

## 🚀 功能特性

### 1. 用户管理
- ✅ 获取用户列表
- ✅ 添加新用户
- ✅ 更新用户信息
- ✅ 删除用户
- ✅ 实时数据同步

### 2. 文章管理
- ✅ 无限滚动加载文章
- ✅ 自动分页处理
- ✅ 加载状态指示

### 3. 查询状态监控
- ✅ 实时查询状态显示
- ✅ 缓存状态监控
- ✅ 错误处理展示

### 4. React Query DevTools
- ✅ 查询缓存可视化
- ✅ 实时状态监控
- ✅ 调试工具集成

## 🛠️ 技术栈

- **@tanstack/react-query**: 强大的数据获取和状态管理库
- **@tanstack/react-query-devtools**: React Query 开发者工具
- **json-server**: 快速搭建 REST API 的工具
- **React 19**: 最新版本的 React

## 📦 安装依赖

```bash
pnpm install
```

## 🚀 启动项目

### 方式一：分别启动（推荐用于学习）

1. 启动 JSON Server（后端 API）：
```bash
pnpm run server
```

2. 启动 React 应用（前端）：
```bash
pnpm start
```

### 方式二：同时启动

```bash
pnpm run dev
```

## 📁 项目结构

```
src/
├── components/
│   └── react-query-demo/
│       ├── index.jsx          # 主要的 demo 组件
│       └── styles.css         # 样式文件
├── App.js                     # 应用入口，配置 QueryClient
db.json                        # JSON Server 数据文件
```

## 🎯 学习要点

### 1. QueryClient 配置
```javascript
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,     // 数据新鲜度
      cacheTime: 10 * 60 * 1000,    // 缓存时间
      retry: 3,                      // 重试次数
      refetchOnWindowFocus: false,   // 窗口聚焦重新获取
    },
    mutations: {
      retry: 1,                      // 变更重试次数
    },
  },
});
```

### 2. useQuery 基础用法
```javascript
const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});
```

### 3. useMutation 变更操作
```javascript
const mutation = useMutation({
  mutationFn: addUser,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});
```

### 4. useInfiniteQuery 无限滚动
```javascript
const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
  getNextPageParam: (lastPage, pages) => {
    return lastPage.length === 5 ? pages.length + 1 : undefined;
  },
});
```

## 🔧 API 端点

JSON Server 提供以下 REST API：

- `GET /users` - 获取用户列表
- `POST /users` - 创建用户
- `PUT /users/:id` - 更新用户
- `DELETE /users/:id` - 删除用户
- `GET /posts` - 获取文章列表（支持分页）

## 🎨 UI 特性

- 现代化的卡片式设计
- 响应式布局
- 加载状态动画
- 错误状态提示
- 成功操作反馈

## 🐛 调试技巧

1. **使用 React Query DevTools**：
   - 点击右下角的 React Query 图标
   - 查看查询状态、缓存数据、网络请求

2. **查看网络请求**：
   - 打开浏览器开发者工具
   - 切换到 Network 标签页
   - 观察 API 请求和响应

3. **控制台日志**：
   - demo 中包含了详细的控制台日志
   - 可以观察数据流和状态变化

## 📚 扩展学习

- [React Query 官方文档](https://tanstack.com/query/latest)
- [JSON Server 文档](https://github.com/typicode/json-server)
- [React Query DevTools 使用指南](https://tanstack.com/query/latest/docs/react/devtools)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个 demo！