WAN

后端转全栈的 React 学习路径，从核心原语到AI 时代

50 篇内容为「Java 后端」量身设计。用后端思维类比（组件=函数、State=字段、Router=RequestMapping）， 让 27 个核心知识点快速落地，一步到位掌握实际开发所需的 React 全栈能力。

从第 1 篇出发 →浏览学习路径 ↓

LEARNING PATH · 学习路径

VII 卷完整体系，由浅入深学透 React

HOW TO USE · 使用方法

建议按顺序阅读，用后端思维迁移

这 VII 卷由浅入深，从核心原语出发，逐步深入到 Hooks、状态管理和 AI 时代进阶。每一篇都尽量用 Java/Spring 类比，帮你把已有知识迁移过来，而不是从零学一门新语言。

01

建立映射

把 React 概念映射到你熟悉的 Java 概念

→
02

先定 state

像建表一样，先把状态模型定清楚

→
03

动手写

每个知识点配可运行的代码示例

→
04

追原理

不只会用，理解虚拟 DOM / diff 本质

→
05

实战闭环

用一个小项目串起所有知识点

「AI 时代，全栈能力不再是加分项，
而是后端工程师的生存必需品。」

EXPAND · 逐卷展开

下面把 VII 个部分逐一摊开，7 卷 50 篇正文已全部完成，建议按顺序阅读。

I

核心原语

—— 组件·JSX·State·渲染模型

从后端视角看懂 React：声明式 UI、JSX、组件、State 与虚拟 DOM。用 Java/Spring 的类比快速建立前端心智模型，这是后端转全栈的第一道分水岭。

  1. 01声明式 UI：从命令式 DOM 到 React 的心智转变对比手写 DOM / jQuery 的命令式做法，理解 React 的声明式「状态 → 视图」模型——后端转前端的第一道分水岭。入门核心
  2. 02JSX 详解：它到底是模板还是代码？JSX 不是字符串模板，而是 JavaScript 表达式，经 Babel 编译成 createElement 调用。对比 JSP/Thymeleaf 看懂本质。入门核心
  3. 03组件与 Props：前端的「方法」和「参数」函数组件 + 单向数据流。用 Java 的「方法签名 + 不可变参数」类比 Props，理解为什么 Props 只读、不可修改。入门核心
  4. 04State 与 useState：数据驱动的视图更新state 是组件的「实例字段」，setState 触发重渲染。对比 JavaBean 的字段 + setter，看清 React 为什么要求不可变更新。入门核心
  5. 05渲染模型：虚拟 DOM 与协调 diff为什么 React 不直接操作真实 DOM？虚拟 DOM + 协调算法的本质。对比后端 MVC 的整页重绘，理解性能从哪来。进阶核心
  6. 06事件处理与合成事件系统React 的合成事件、事件委托，以及函数组件里「this」没了去哪儿。对比 Java 的事件监听器模型。入门
  7. 07列表渲染与 key：diff 的正确打开方式map 渲染列表，key 为什么不能是数组下标？对比 Java 循环，理解 React 靠 key 做增删改的最小化 diff。入门核心
  8. 08第一章实战：手写一个待办清单组件用 JSX + Props + State + 事件 + 列表渲染，从零实现一个 Todo 组件，串联第一章所有知识点。实战核心
下一卷 · II · Hooks 精讲
II

Hooks 精讲

—— useState 之外的 React 灵魂

useEffect、useMemo、useRef、自定义 Hook——Hooks 是 React 的骨架，也是后端转前端最容易踩坑的地方。把副作用、闭包、依赖数组一次讲透。

  1. 09useEffect 与生命周期：副作用该放哪？把数据请求、订阅、定时器放进 useEffect。对比 Spring Bean 的初始化/销毁回调，理解清理函数（cleanup）的价值。进阶核心
  2. 10依赖数组与闭包陷阱：stale closure为什么 effect 里读到的是旧状态？依赖数组的机制与 ESLint 规则。闭包陷阱是后端转前端最困惑的一点。进阶核心
  3. 11useMemo 与 useCallback：何时真正需要？缓存值 vs 缓存函数。绝大多数场景你并不需要它们——先搞清「引用相等」和「重渲染」，再谈优化。进阶
  4. 12useRef：访问 DOM 与「可变而不可渲染」的值useRef 既是 DOM 的句柄，也是不触发渲染的可变容器。类似 Java 里的实例字段，但改了不会重新渲染。进阶
  5. 13自定义 Hook：复用的正确姿势把重复的 state + effect 逻辑抽成自定义 Hook，对比 Java 的工具类与策略模式。这是 React 里最重要的复用手段。进阶核心
  6. 14状态提升与单向数据流父子组件共享状态时「把 state 往上提」。理解 React 单向数据流的约束，以及它为什么让应用更可预测。进阶核心
  7. 15useContext：跨层传递的广播机制props 层层透传太痛苦？Context 提供一条「广播通道」。但滥用会导致全树重渲染——何时该用、何时不该用。进阶
  8. 16Hooks 规则与十大常见陷阱为什么 Hooks 不能写在条件判断里？React 靠调用顺序识别 Hook。配合实战总结后端易犯的 10 个高频坑。进阶核心
下一卷 · III · 状态管理
III

状态管理

—— 客户端状态与服务端数据

Context、Zustand、Redux Toolkit 与 TanStack Query。理清「UI 状态」和「服务端数据」的分界（对应后端 DAO/缓存分层），别再一把梭。

  1. 17客户端状态 vs 服务端状态：先分清再谈方案「UI 选中哪一项」和「数据库里有哪些用户」是两种状态。对比后端 DAO/缓存分层，别把服务端数据塞进全局 store。进阶核心
  2. 18Zustand：轻量状态管理实战几行代码搞定全局状态，无 Provider、无样板。对比单例 + 观察者，Zustand 是当下小型应用的事实标准。实战核心
  3. 19Redux Toolkit 与单向数据流Flux 架构、Reducer、不可变更新。Redux Toolkit 大幅简化了样板。理解「单一数据源 + 单向流动」的设计哲学。进阶
  4. 20Context / Zustand / Redux 如何选型三者的适用边界与取舍。给出一个可执行的选型决策树，避免「为了用而用」的过度设计。进阶
  5. 21表单状态管理（对比 Spring 表单绑定）受控表单 + 校验三件套（React Hook Form / Zod）。对比 Spring MVC 的 @ModelAttribute，理解前端的表单数据流。实战
  6. 22状态持久化与多端同步状态写进 localStorage、与后端同步、多标签页联动。持久化中间件的原理与陷阱。实战
下一卷 · IV · 组件设计与工程化
IV

组件设计与工程化

—— 组合·复用·TypeScript

组合优于继承、受控组件、复合组件模式，以及 TypeScript 加持下的类型安全 React——把 Java 的工程素养迁移到前端，写出可维护的代码。

  1. 23组合优于继承：Java 设计原则的前端回响React 几乎没有继承，全靠组合。Java 里「组合优于继承」的前车之鉴，在 React 里被推到了极致。进阶核心
  2. 24受控组件与非受控组件表单值由 React state 控制 vs 由 DOM 自身管理。两种模式的取舍与适用场景，面试和实战都常考。进阶核心
  3. 25children 与复合组件模式把 JSX 当参数传入组件。复合组件（Compound Components）如何构建灵活又类型安全的组件库。进阶
  4. 26高阶组件与 render props：历史与现状HOC 和 render props 曾是复用利器，如今大多被自定义 Hook 取代。了解它们，才能读懂老代码。进阶
  5. 27组件拆分与职责边界（对比三层架构）UI 组件 / 容器组件 / 逻辑 Hook 的分层，对应后端的 View / Controller / Service。让目录结构体现架构意图。实战核心
  6. 28TypeScript 与 React：类型安全的组件给 Props、state、事件用 TS 建模，对比 Java 的泛型与接口。类型安全能拦住一大半前端 bug，Java 程序员上手极快。实战核心
  7. 29目录结构与代码规范按功能 vs 按类型组织目录、命名约定、ESLint/Prettier 配置。把 Java 项目的规范意识带到前端。实战
下一卷 · V · 路由与数据获取
V

路由与数据获取

—— Router·请求·缓存·竞态

React Router 嵌套路由（对比 Spring @RequestMapping）、fetch/axios 请求、TanStack Query 服务端缓存——把「取数」这件事做对、做干净。

  1. 30React Router 与嵌套路由（对比 @RequestMapping）路由表、嵌套布局、Outlet。用 Spring 的 @RequestMapping / 拦截器类比，快速建立前端路由心智。实战核心
  2. 31动态路由与参数解析路径参数、查询参数、useParams/useSearchParams。对应对后端的 @PathVariable / @RequestParam。实战
  3. 32数据获取：fetch / axios 与 useEffect 取数在组件里发起请求、处理 JSON。为什么 useEffect 取数有竞态问题，以及前置方案的历史包袱。实战核心
  4. 33TanStack Query：服务端缓存管理把服务端状态交给 TanStack Query 管理：自动缓存、失效重取、乐观更新。对比 MyBatis 的二级缓存。实战核心
  5. 34加载态 / 错误态 / 竞态处理isLoading / isError / 竞态取消。把「请求的三种状态」建模清楚，前端代码立刻稳妥一个档次。实战
  6. 35认证与路由守卫（对比拦截器）登录态存储、受保护路由、token 注入。用 Spring Security / 拦截器的思路理解前端认证流程。实战
  7. 36分页与无限滚动分页组件、IntersectionObserver 无限滚动、游标与偏移量的取舍。实战
下一卷 · VI · 性能优化与部署
VI

性能优化与部署

—— 渲染·缓存·构建·上线

重渲染剖析、memo 策略、代码分割、Vite 构建（对比 Maven/Gradle）与 CI/CD 部署——让 React 应用又快又稳地跑在生产环境。

  1. 37重渲染剖析：memo 何时真正有用父组件重渲染，子组件一定跟着刷吗？理解引用相等与 props 比对，才知道 memo 该加在哪。进阶核心
  2. 38虚拟列表与大数据渲染万行列表只渲染可视区。react-window / 虚拟滚动的原理，对比后端分页返回的思路。进阶
  3. 39代码分割与懒加载React.lazy + Suspense、按路由拆包。对比后端的模块化/插件化，首屏不再加载一整个 app。进阶
  4. 40Vite 构建原理（对比 Maven/Gradle）ESM + esbuild + Rollup 的构建链路。用 Maven 依赖解析/打包类比，理解前端构建产物是什么。实战
  5. 41性能监控与 React Profiler用 React DevTools Profiler 定位慢渲染，结合 Lighthouse 打生产包。像排查后端慢接口一样排查前端。进阶
  6. 42部署：静态站 / Nginx / CI 流水线把 React 应用部署到 Nginx/静态托管、配置回退路由、接 GitHub Actions 自动构建发布。后端部署经验直接复用。实战
下一卷 · VII · AI 时代的前端进阶
VII

AI 时代的前端进阶

—— RSC·流式 UI·LLM 集成

Next.js 服务端组件、流式响应、与 LLM 集成的对话式体验——AI 时代全栈工程师的最后一公里。

  1. 43Java 后端全栈转型路线图AI 时代为什么后端更需要全栈能力？一条从 React 到全栈的可执行路径，以及各阶段的里程碑。入门核心
  2. 44Next.js 服务端组件：一次范式转移Server Components 让组件直接在服务端渲染——后端程序员反而有主场优势。理解「客户端边界」的精髓。进阶核心
  3. 45流式 UI 与 LLM 响应把 LLM 的分词响应用 SSE 流式渲染到界面，做出打字机效果。这是 AI 产品体验的核心一环。实战核心
  4. 46集成 LLM 的前端实践对话界面、消息列表、停止生成、错误重试。拆解一个 AI Chat 前端的完整实现思路。实战核心
  5. 47与 AI 结对编程：V0 / Cursor 提效用 AI 生成组件骨架、审阅代码、重构。前提是你先读懂这本笔记——AI 是放大器，不是替代品。实战
  6. 48Agent 前端：工具调用与状态机Agent 的多轮 tool-call 如何在前端建模？用状态机组织「思考中/调用工具/生成中/完成」的界面。进阶
  7. 49从 React 到全栈：一个项目打通用 React + Next.js + 你的 Java 后端做一个端到端小项目，把前面六章串成一次真实交付。实战核心
  8. 50前沿展望：Server Actions / 边缘计算Server Actions、Partial Prerendering、边缘运行时——Next.js 演进的下一个方向，保持视野在线。进阶

⚛️ 开始你的全栈转型之旅！

建议从「核心原语」开始，这是所有 React 开发的地基。用你熟悉的 Java 思维迁移过来，很快就能上手实战。

返回首页开始学习 →