第 165 章:实战总结与资源

学习目标

回顾整个 React 知识体系
掌握学习路径建议
收藏常用资源
规划下一步进阶方向

一、React 知识全景

二、章节回顾

章节	主题	关键
141	为什么 React	选型决策
142	环境	Node/pnpm/VSCode
143	第一个应用	App Router / 组件
144	JSX	表达式/条件/列表
145	组件 Props	组合 vs 配置
146	useState	不可变更新
147	条件/列表	map + key
148	事件	camelCase + 类型化
149	useEffect	副作用 + 清理
150	useRef/Memo/Callback	性能优化
151	useReducer/Context	复杂状态
152	自定义 Hook	逻辑复用
153	表单	RHF + Zod
154	React Router	SPA 路由
155	Zustand	轻量状态
156	TypeScript	类型化
157	Tailwind	样式方案
158	App Router 深入	特殊文件
159	数据获取	Server Components
160	Route Handlers	API
161	Middleware/Auth	鉴权
162	部署	Vercel
163	测试	Vitest + RTL
164	性能	memo/懒加载
165	总结	资源

三、学习路径建议

3.1 完全新手(0 基础)

第 1 周:141-145(环境 + 基础)
第 2 周:146-150(useState + 常用 Hook)
第 3 周:151-153(进阶 Hook + 表单)
第 4 周:154-155(路由 + 状态)
第 5 周:156-157(TS + Tailwind)
第 6 周:158-160(App Router + 数据)
第 7 周:161-162(鉴权 + 部署)
第 8 周:163-165(测试 + 优化)

3.2 有 Vue 经验

跳过 141-145 类比章节,直接看差异点:

151 useReducer(类比 Pinia)
154 React Router(类比 Vue Router)
155 Zustand(类比 Pinia)
158 App Router(类比 Nuxt)

3.3 已有 React 经验

重点看 156(TS)、158-160(App Router)、161(NextAuth)、164(性能)

四、推荐资源

4.1 官方文档(必读)

资源	链接
React 官方	https://react.dev
Next.js 官方	https://nextjs.org/docs
React TypeScript	https://react-typescript-cheatsheet.netlify.app

4.2 实战教程

资源	特点
Next.js Learn	官方交互式教程
Vercel Templates	各种开箱即用模板
shadcn/ui	现代组件库
T3 Stack	全栈 TypeScript

4.3 视频

频道	内容
Jack Herrington	React 进阶
Theo - t3.gg	全栈实战
Codevolution	基础入门

4.4 播客

Syntax.fm(Full Stack JS)
React Pod(React 专项)

五、常见面试题

Server Components 和 Client Components 的区别?
useEffect 依赖数组的工作原理?
useMemo 和 useCallback 区别?
如何避免 React 性能问题?
Next.js App Router 相对 Pages Router 的优势?
RSC(React Server Components)的实现原理?
Suspense 是怎么工作的?
forwardRef 在 React 19 中为什么被弃用?
受控 vs 非受控组件?
如何做权限控制?

六、推荐项目练手

项目	难度	学到
Todo App	⭐	基础 CRUD
Markdown 博客	⭐⭐	文件系统路由
电商商品页	⭐⭐⭐	数据获取 + 状态
聊天应用	⭐⭐⭐	WebSocket + 实时
CMS 系统	⭐⭐⭐⭐	完整后台

七、下一步方向

八、社区与贡献

React GitHub Discussions
Next.js Discord
Reactiflux Discord
Vercel Community

九、配套示例

bash

# examples/ 目录下
hello-react/        # 第 143 章示例
todo-app/           # 第 147 章 todo 列表
auth-demo/          # 第 161 章鉴权
blog/               # 综合实战

十、本章小结

维度	建议
学习	1 章/天,边学边做
实战	每章动手练习必做
项目	学完做 2-3 个完整项目
进阶	看源码、参与开源

最后的建议

不要死记硬背:理解原理,API 自然记住
动手 > 看:每章代码都自己敲一遍
造轮子:用学到的知识做个人项目
读源码:Vue 读 Vue 源码,React 读 React 源码
保持好奇:前端变化快,持续学习

第 165 章:实战总结与资源 ​

一、React 知识全景 ​

二、章节回顾 ​

三、学习路径建议 ​

3.1 完全新手(0 基础) ​

3.2 有 Vue 经验 ​

3.3 已有 React 经验 ​

四、推荐资源 ​

4.1 官方文档(必读) ​

4.2 实战教程 ​

4.3 视频 ​

4.4 播客 ​

五、常见面试题 ​

六、推荐项目练手 ​

七、下一步方向 ​

八、社区与贡献 ​

九、配套示例 ​

十、本章小结 ​

最后的建议 ​

推荐阅读(综合) ​

第 165 章:实战总结与资源

一、React 知识全景

二、章节回顾

三、学习路径建议

3.1 完全新手(0 基础)

3.2 有 Vue 经验

3.3 已有 React 经验

四、推荐资源

4.1 官方文档(必读)

4.2 实战教程

4.3 视频

4.4 播客

五、常见面试题

六、推荐项目练手

七、下一步方向

八、社区与贡献

九、配套示例

十、本章小结

最后的建议

推荐阅读(综合)