目录
- 前言
- [一、创建一个 react 项目](#一、创建一个 react 项目)
- [二、react 语法](#二、react 语法)
- [三、react 组件](#三、react 组件)
- [四、react 的 API](#四、react 的 API)
- [五、react 的状态管理](#五、react 的状态管理)
- [六、react 的性能优化](#六、react 的性能优化)
前言
- Vue 官网这样说：渐进式 JavaScript 框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。
- React 官网这样说：React 用于构建 Web 和原生交互界面的库 。
由此可见：
- React 更像是一个 UI 渲染框架（
UI = f(data)------数据驱动视图），React 需要依赖强大的第三方库，这使得 React 更加灵活，但也更加混乱。- Vue 更像一个系统框架，因为 Vue 内置了
UI + 反应式 + 数据流 + 模板引擎的一体化的官方解决方案，这使得 Vue 的更加规范且清晰，而 React 没有。
首先看下 React 和 Vue 的设计理念对比：
| 设计理念 | React | Vue |
|---|---|---|
| 响应式系统 | ❌ 无 | ✔ 有（内置依赖追踪） |
| Granularity（粒度） | 粗粒度：组件级更新 （useState = re-render 整个组件） |
细粒度：属性级更新 （reactive = 更新到具体使用位置） |
| 全局状态管理 | ❌ 无（靠生态） | ✔ 有 Pinia（官方） |
| SSR + 数据管理 | ❌ 无（需要 Next.js） | ✔ 有 Nuxt.js（官方） |
| 前端构建工具 | ❌ 无（靠生态） | ✔ 有 Vite（官方） |
| 模板引擎 | ❌ 无（需要 JSX/TSX） | ✔ 有（内置模板语法） |
| 体系是否统一 | ❌ 依赖大量外部生态 | ✔ 官方统一方案 |
所以 Vue 更像是："React 内置版的 Zustand + Jotai + Signals"。而 React 需要自己搭建，自己选择合适的框架。虽然 React 更灵活，但它没有一整套全流程的官方方案，过度依赖第三方框架会更加混乱，这就要求开发者的架构能力要高，门槛自然就更高了。
有人说，react 不是一个前端框架，而是一个生态体系，由理念、工具、社区、标准共同驱动的"现代前端操作系统"。
有人说，react 不是一个框架，更像是一套思维模型。react 是一个由组件化、状态驱动、单向数据流、不可变性组成的世界观。
关于 React，现在最流行的 "黄金组合 "：
"Function Component（Hooks）＋ 自定义 hooks ＋ 组件组合模式（Composition）"，再加上一些来自第三方的现代技术栈：
- 状态管理：
Zustand / Jotai / Redux Toolkit - UI 库：
MUI / AntD / Chakra / shadcn/ui - 数据请求：
React Query - 路由：
React Router v6 - 前端构建工具：
Vite + Rollup（Webpack 已退位） - SSR/SSG：
Next.js + RSC - 性能：
useMemo、useCallback、useTransition、Suspense
一、创建一个 react 项目
二、react 语法
react 与 DOM
JSX | TSX 教程
react 使用 PropTypes 进行类型检查
三、react 组件
四、react 的 API
五、react 的状态管理
包括 useState、useReducer、Context、Zustand、Jotai、Redux Toolkit、React Query、React 19 + RSC 等。
react 的状态管理
RTK（Redux Toolkit） 学习
TanStack Query 的 React Query 学习