你现在的位置

读完这 42 篇（react-quick 17 + react-advanced 25），你能：

  • 用 Next.js 起完整项目并部署
  • 解释 React 渲染心智模型，定位 re-render 问题
  • 用 Hooks 写复用逻辑，分清 effect / state / ref
  • 选对状态管理、数据获取、表单方案
  • TypeScript + 测试 + 监控成体系
  • 区分 SSR / CSR / SSG / ISR 并按场景混用

下一步看你想往哪个方向走。

方向 1：深 UI / 设计系统

目标：能搭自家组件库 / 维护团队设计系统。

读：

练手项目：基于 Radix + Tailwind 写一套自家 UI 包。

方向 2：性能 / 工程化

目标：能给大型 React 应用做性能审计、优化构建。

读：

  • React Compiler 设计文档
  • Why React Re-Renders
  • Webpack / Turbopack / Vite 的工作原理
  • Source map / 代码分割实战
  • Lighthouse + Web Vitals + Real User Monitoring

练手：拿一个开源 React 项目（如旧版 Notion clone），跑 Lighthouse 找 3 处可优化点改完。

方向 3：全栈 / Server-Side

目标：从前端走向"前端为入口的全栈"。

读：

  • Drizzle / Prisma ORM
  • tRPC 类型安全 API
  • Server Actions + Suspense 深度
  • 队列 / 后台任务（Inngest / BullMQ）
  • 缓存策略（Next.js Data Cache / Redis）
  • 身份认证：Auth.js / Lucia
  • 数据库：Postgres 索引、迁移、备份

练手：写一个完整 SaaS 雏形——登录、订阅付费（Stripe）、邮件、后台任务。

方向 4：React 生态扩展

目标：除了 web，会在更多场景用 React。

方向 5：状态 / 数据 / 实时

目标：能设计复杂应用的数据架构。

方向 6：底层 / 看 React 源码

目标：从框架使用者到框架理解者。

  • Fiber 架构（reconciliation 算法）
  • 调度器（Scheduler）
  • React Compiler 源码
  • React Server Components 的 wire protocol
  • 写一个迷你 React（500 行版本：build-your-own-react）

方向 7：横向迁移

学了 React，看看别的：

  • Vue 3：选项 API vs 组合 API，对比 React Hooks
  • Solid：Signals 模型，比 React 更细粒度的响应
  • Svelte / SvelteKit：编译时框架
  • Qwik：resumability 范式（不是 hydration）
  • HTMX：少 JS 路线

懂 2-3 个对比之后，回头看 React 会更通透。

学习方法建议

  1. 先做项目，再补理论：抽象概念配真问题才记得住
  2. 读源码：选你天天用的库（如 zustand 200 行），通读一遍
  3. 关注更新：React 官博、Next.js 博客
  4. 写技术博客：把搞明白的事写下来，是最深刻的复习
  5. 看实战仓库：Cal.com、Excalidraw、Dub 都是 Next.js 生产级开源项目

反建议

  • 别追新工具焦虑：核心心智模型几年没变，新框架 80% 是包装
  • 别只看视频：写代码 5 倍快于看
  • 别只 ToDo App：上规模才发现问题，做能让朋友真的用的小应用

一个推荐节奏

  • 第 1 月：把一个真实小项目从 0 部署到上线
  • 第 2 月：选 1-2 个 方向 重点突破
  • 第 3 月：开始读源码 / 写博客 / 给开源 PR
  • 第 4 月起：每月一个小项目，每个项目刻意练习一个新东西

42 篇文章只是入门 + 进阶。React 本身简单，难的是把它和真实世界拼起来。继续动手就行。

🎉 React 系列完结。如果有内容错误或建议，欢迎反馈。