# viteReactStudy **Repository Path**: liukgitee/vite-react-study ## Basic Information - **Project Name**: viteReactStudy - **Description**: 一个比较详细的学习react的项目，vite构建，有别于next.js构建 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-01-14 - **Last Updated**: 2026-01-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # React 知识点学习平台 一个基于 React + TypeScript + Vite 构建的 React 知识点学习平台，使用 Ant Design 作为 UI 框架，包含 React Hooks、React Router、状态管理、API 调用等多个学习模块。 ## 技术栈 - **前端框架**: React 18 + TypeScript - **构建工具**: Vite - **UI 框架**: Ant Design - **路由管理**: React Router - **状态管理**: Redux Toolkit - **HTTP 客户端**: Axios - **样式方案**: CSS Modules - **代码检查**: ESLint ## 功能模块 1. **首页**：平台介绍和各个知识点导航 2. **React Hooks 学习**： - useState 状态管理 - useEffect 副作用处理 - useContext 上下文共享 - useReducer 复杂状态管理 - useMemo 性能优化 - useCallback 性能优化 - useRef 引用管理 3. **React 性能优化**： - React.memo 组件记忆化 - useMemo 计算记忆化 - useCallback 函数记忆化 - 性能优化最佳实践 4. **React Router 学习**： - 路由基本概念 - 路由导航 - 动态路由 - 路由状态管理 4. **状态管理**： - 组件内部状态 - useReducer 状态管理 - Context API 全局状态管理 - Redux Toolkit 状态管理 - 子组件向父组件传递数据 - 状态管理方案对比 5. **API 调用**： - GET 请求示例 - POST 请求示例 - 错误处理 - 加载状态管理 - 自定义 Hooks 封装 - 带参数的 API 调用 6. **横向导航**： - Menu 实现方式 - Tabs 实现方式 7. **Three.js 示例**： - 3D 场景创建 - 交互式操作 - 几何体和材质 - 灯光和阴影 8. **自定义 Hooks**： - useLocalStorage 持久化存储 - useApi API 调用状态管理 - 带参数的 API 调用 - 自定义 Hooks 最佳实践 9. **关于页面**：项目介绍、技术栈、使用说明 ## 项目特点 - 详细的代码注释，便于理解每个知识点 - 交互式示例，可直接在页面上操作和查看效果 - 响应式设计，适配不同屏幕尺寸 - 清晰的导航结构，易于浏览各个知识点 - 完整的 TypeScript 类型支持 - 自定义 Hooks 封装，提高代码复用性 - Three.js 3D 示例，展示前端 3D 渲染能力 - 统一的 API 服务层，支持多环境配置 - 持久化存储解决方案，使用 localStorage - 性能优化示例，展示 React.memo、useMemo 和 useCallback 的使用 ## 运行命令 ### 安装依赖 ```bash npm install ``` ### 启动开发服务器 ```bash npm run dev ``` 访问地址：http://localhost:5173/ ### 构建生产版本 ```bash npm run build ``` 构建结果输出到 `dist` 目录 ### 运行代码检查 ```bash npm run lint ``` ### 预览生产构建 ```bash npm run preview ``` ## 项目结构 ``` src/ ├── assets/ # 静态资源 │ └── react.svg # React 图标 ├── components/ # 通用组件 │ ├── Layout.tsx # 布局组件 │ └── Layout.module.css # 布局样式 ├── hooks/ # 自定义 Hooks │ ├── useApi.ts # API 调用状态管理 Hook │ └── useLocalStorage.ts # 持久化存储 Hook ├── pages/ # 页面组件 │ ├── About.module.css # 关于页面样式 │ ├── About.tsx # 关于页面 │ ├── Api.module.css # API 调用页面样式 │ ├── Api.tsx # API 调用页面 │ ├── CustomHooks.module.css # 自定义 Hooks 页面样式 │ ├── CustomHooks.tsx # 自定义 Hooks 示例 │ ├── Home.module.css # 首页样式 │ ├── Home.tsx # 首页 │ ├── Hooks.module.css # Hooks 学习页面样式 │ ├── Hooks.tsx # Hooks 学习页面 │ ├── HorizontalNavMenu.module.css # Menu 实现方式样式 │ ├── HorizontalNavMenu.tsx # Menu 实现方式 - 横向导航 │ ├── HorizontalNavTabs.module.css # Tabs 实现方式样式 │ ├── HorizontalNavTabs.tsx # Tabs 实现方式 - 横向导航 │ ├── NotFound.module.css # 404页面样式 │ ├── NotFound.tsx # 404页面 │ ├── PerformanceOptimization.module.css # 性能优化页面样式 │ ├── PerformanceOptimization.tsx # React 性能优化示例 │ ├── Router.module.css # Router 学习页面样式 │ ├── Router.tsx # Router 学习页面 │ ├── StateManagement.module.css # 状态管理页面样式 │ ├── StateManagement.tsx # 状态管理页面 │ ├── ThreeJS.module.css # Three.js 页面样式 │ ├── ThreeJS.tsx # Three.js 完整示例 │ ├── ThreeJSBasic.tsx # Three.js 基础示例（测试鼠标交互） │ └── ThreeJSSimple.tsx # Three.js 简化示例 ├── routes/ # 路由配置 │ └── index.tsx # 路由规则定义 ├── services/ # API 服务层 │ └── api.ts # API 工具类，支持多服务器配置 ├── store/ # Redux 状态管理 │ ├── appSlice.ts # App 状态切片 │ └── index.ts # Store 配置 ├── types/ # TypeScript 类型定义 │ └── index.ts ├── App.module.css # 应用样式 ├── App.tsx # 应用入口组件 ├── index.css # 全局基础样式 └── main.tsx # 应用渲染入口 ``` ## 环境配置 项目支持多环境配置，通过 `.env` 文件管理不同环境的 API 地址和其他配置。 ### 配置文件示例 ```bash # 复制 .env.example 为 .env 并根据实际情况修改 cp .env.example .env ``` ### 配置项说明 ```bash # 不同环境下的 API 服务器地址 VITE_API_BASE_URL_DEV=https://jsonplaceholder.typicode.com VITE_API_BASE_URL_TEST=https://test-api.example.com VITE_API_BASE_URL_PROD=https://api.example.com # 不同环境下的认证服务器地址 VITE_AUTH_BASE_URL_DEV=https://auth.example.com VITE_AUTH_BASE_URL_TEST=https://test-auth.example.com VITE_AUTH_BASE_URL_PROD=https://auth.example.com # 当前环境 (dev, test, prod) VITE_ENV=dev ``` ## 主题切换 项目支持亮色/暗色主题切换，通过 Redux 管理主题状态： - 点击首页右上角的主题切换按钮 - 主题状态会保存到 Redux store 中 - 支持 Ant Design 组件库的主题适配 ## 使用说明 1. 通过左侧菜单导航到各个学习模块 2. 每个模块都有详细的示例和说明 3. 可以直接在页面上操作示例，查看效果 4. 代码中包含详细的注释，便于理解每个知识点 5. 支持主题切换，可根据个人喜好调整 6. API 调用示例使用真实的 JSONPlaceholder API ## API 服务层 项目使用统一的 API 服务层，支持多服务器配置： - **集中管理**：所有 API 地址和配置集中在 `src/services/api.ts` - **多环境支持**：根据 `.env` 文件自动切换不同环境的 API 地址 - **多服务器支持**：同时支持 API 服务器、认证服务器等多个服务 - **类型安全**：完整的 TypeScript 类型支持 - **统一拦截**：共享请求/响应拦截器，统一处理错误 ### 详细使用说明 请查看 [API_USAGE.md](./API_USAGE.md) 文件获取完整的 API 服务层使用说明，包括： - 基本使用方法 - 预定义 API 服务 - 高级功能（缓存、取消请求、重试机制） - 配置说明 - 示例代码 - 最佳实践 ### 简单使用示例 ```typescript // 导入 API 服务 import apiService from '../services/api'; // 调用 API const fetchPosts = async () => { const posts = await apiService.posts.getAll(); // 使用数据 }; ``` ## 学习资源 - [React 官方文档](https://react.dev/) - [TypeScript 官方文档](https://www.typescriptlang.org/) - [Vite 官方文档](https://vite.dev/) - [Ant Design 官方文档](https://ant.design/) - [React Router 官方文档](https://reactrouter.com/) ## 后续扩展 可以根据需要继续扩展其他 React 知识点，如： - React 性能优化 - 测试（Jest + React Testing Library） - 表单处理 - 动画效果 - 国际化支持 - 服务端渲染 ## 许可证 MIT