前言
React 是目前前端岗位招聘中需求最大的框架之一。本文整理官方文档链接与一条从入门到实战的学习路线，方便系统学习与随时查阅。
一、官方文档与核心链接
| 资源 | 链接 | 说明 |
|---|---|---|
| React 官方文档（英文） | react.dev | 最新版文档，以 Hooks + 函数组件为核心 |
| React 中文文档 | react.docschina.org | 中文翻译版，与官方保持同步 |
| React API 参考 | API Reference | 所有内置 Hook 与 API 的完整说明 |
| React 源码仓库 | facebook/react | GitHub 源码与 Issue 讨论 |
| Create React App（已弃用） | 官方已不推荐 | 新项目请使用 Vite 或 Next.js |
| Vite | vite.dev | 当前 React 项目的主流脚手架 |
| Next.js | nextjs.org | React 官方推荐的生产级全栈框架 |
二、学习路线
阶段一：基础入门（1~2 周）
按官方文档的 快速上手 顺序学习：
- JSX 语法：在 JS 中写 HTML，表达式用
{}包裹 - 组件：函数组件的定义、Props 传递、组合复用
- 条件与列表渲染：
&&、?:与map+key - 事件处理：
onClick、onChange，注意合成事件机制 - State 状态：
useState的基本使用与不可变更新原则
阶段二：Hooks 进阶（2~3 周）
这是 React 的核心，也是面试高频考点：
| Hook | 用途 | 学习要点 |
|---|---|---|
useState |
状态管理 | 函数式更新、对象/数组的不可变操作 |
useEffect |
副作用 | 依赖数组、清理函数、常见闭包陷阱 |
useRef |
DOM 引用 / 可变值 | 不触发重渲染的特性 |
useMemo / useCallback |
性能优化 | 缓存计算结果与函数引用，配合 memo 使用 |
useContext |
跨层级传值 | 避免 Props 逐层透传 |
useReducer |
复杂状态逻辑 | 类 Redux 的 reducer 模式 |
| 自定义 Hook | 逻辑复用 | 封装请求、表单、监听等通用逻辑 |
阶段三：生态与工程化（3~4 周）
| 方向 | 推荐方案 | 文档 |
|---|---|---|
| 路由 | React Router | reactrouter.com |
| 轻量状态管理 | Zustand | zustand.docs |
| 大型状态管理 | Redux Toolkit | redux-toolkit.js.org |
| 服务端数据请求 | TanStack Query | tanstack.com/query |
| UI 组件库 | Ant Design 5 | ant.design |
| CSS 方案 | Tailwind CSS / CSS Modules | tailwindcss.com |
| 类型系统 | TypeScript | React 官方已全面支持 TS |
| 单元测试 | Vitest + Testing Library | testing-library.com |
阶段四：框架与实战（持续）
- Next.js：SSR / SSG / RSC（服务端组件），React 官方推荐的生产框架
- 原理深入：Fiber 架构、并发渲染（Concurrent）、Diff 算法、批处理更新
- 性能优化实战：懒加载（
lazy+Suspense）、虚拟列表、渲染性能分析（React DevTools Profiler） - 完整项目：用 Vite + React + TS + Ant Design + Zustand 搭建一个中后台管理系统
三、社区与拓展资源
| 资源 | 链接 | 说明 |
|---|---|---|
| React 技术揭秘 | kasong 的图解 React | 卡颂出品，深入 React 源码原理 |
| Patterns.dev | patterns.dev | React 设计与性能模式（免费在线书） |
| React 中文社区周刊 | mdnice 周刊 等平台搜索 | 关注生态动态 |
| React 官方文档 | 快速上手 | 面试 React 部分以官方文档为准 |
四、学习建议
- 以官方文档为准：React 18+ 后 Hooks 是主流，网上大量 Class 组件教程已过时，注意甄别
- 边学边写：每个 Hook 都动手写个小 Demo，比纯看文档印象深刻得多
- 结合 Vue 对比理解：有 Vue 基础的同学，可重点对比”响应式 vs 手动 setState”、”Composition API vs Hooks”的心智差异
- 不要急于上 Next.js：先把纯 React（CSR）的渲染机制与 Hooks 吃透，再学服务端渲染
总结
React 的学习路径：官方文档入门 → Hooks 深入 → 生态选型（Router / Zustand / TanStack Query）→ Next.js 与原理。核心资料认准 react.dev 与中文文档，配合实际项目练习，两三个月即可达到求职水平。
内容由 AI 生成，仅供参考。本文发布于 码上学习，转载请注明出处。