React19架构
课程分为四个部分
- 基础
- 高级概念
- 项目实战
- 底层源码与原理
第一部分：基础篇 - 现代化 React 开发入门
学习React 和 TypeScript 基础。现代化的开发环境 Vite ，JSX、函数式组件、核心 Hooks 以及 TypeScript 在 React 中的基础应用。
开发环境与核心概念
- React 思想与前端演进
- 使用 Vite 搭建 React + TypeScript 开发环境
- 深入 JSX 语法与实践技巧
- 函数式组件与 Class 组件对比
组件化开发核心
- Props 与组件通信
- 使用 TypeScript 定义 Props 类型 (PropsWithChildren)
- 事件处理与合成事件系统
- 状态管理入门：useState Hook 详解
- 条件渲染与列表渲染 (key 的重要性)
深入 Hooks 与生命周期
- 副作用处理：useEffect Hook 详解 (挂载、更新、卸载)
- useEffect 的依赖项数组与常见陷阱
- 使用 useRef 访问 DOM 和存储可变值
- TypeScript 与 Hooks 的类型推断与显式声明
第二部分：进阶篇 - 探索 React 19 新范式
本部分是课程的核心，将重点剖析 React 19 带来的重大更新。将一起深入学习 Actions、并发特性、新的 Hooks，并理解 React Compiler 的工作理念，真正走在技术前沿。
React 19 核心特性
Actions: 表单交互的革命
- 使用 <form> 的 action 属性简化数据提交
- 服务端 Actions 与客户端 Actions
- 使用 useActionState 处理 Pending/Error/Success 状态
- 使用 useFormStatus 优化用户体验
并发与 use Hook:
- use Hook：在渲染中读取 Promise 和 Context
- 结合 Suspense 实现优雅的数据加载 UI
其他新特性:
- useOptimistic：实现乐观更新，提升交互体验
- Asset Loading：通过 Suspense 管理样式、字体和脚本加载
- ref 作为 Prop：简化 forwardRef
React Compiler (理念篇)
- 手动优化的痛点：useMemo, useCallback 的困境
- React Compiler ("Forget") 的设计哲学与目标
- Compiler 如何实现自动记忆化 (Memoization)
- 对现有代码库的影响与迁移策略
高级 Hooks 与状态管理
- 复杂状态逻辑：useReducer vs useState
- 全局状态管理：useContext 与性能陷阱
- 手动性能优化：React.memo, useMemo, useCallback 的正确使用场景
- 自定义 Hooks：封装逻辑与实现复用 (含 TS 泛型)
TypeScript 高级应用
- 泛型组件与泛型 Hooks
- React 事件对象的精确类型
- 结合 Zod 进行运行时类型校验
- 高级类型工具 (Utility Types) 在组件 Props 中的应用
第三部分：实战篇 - 构建企业级项目
本部分将理论与实践相结合，带领大家从零开始，使用 React 19 和 TypeScript 构建一个功能完善的现代化 Web 应用（如：Trello/Jira 类的项目管理看板），全面覆盖开发、测试到部署的全流程。
项目启动与架构设计
项目需求分析与技术选型
搭建项目结构与配置代码规范 (ESLint, Prettier)
路由管理：React Router v6+ (动态路由, 嵌套路由, 懒加载)
核心功能开发
状态管理: Zustand - 轻量、高效的全局状态管理方案
数据请求: React Query - 管理服务端状态、缓存、轮询与突变
UI 与样式: Tailwind CSS - Utility-First 的高效样式方案
表单处理: React Hook Form + Zod - 打造类型安全、高性能的表单
组件库: shadcn/ui 或 Ant Design - 高质量组件的集成与自定义
质量保障与部署
单元测试与集成测试 (Jest + React Testing Library)
端到端测试 (Cypress/Playwright) 简介
Vite 构建与打包优化
CI/CD 与自动化部署 (GitHub Actions, Vercel/Netlify)
第四部分：源码与原理篇 - 迈向专家之路
本部分将深入 React 内部，探讨其高效运行的底层原理。理解这些将帮助大家写出更高性能的代码，并在面试中脱颖而出，真正成为 React "专家"。
React 核心工作流
虚拟 DOM (Virtual DOM) 与 Diffing 算法
深入 Fiber 架构：可中断、可恢复的渲染单元
Reconciliation (协调) 过程详解
并发渲染揭秘
什么是并发 (Concurrency)？它解决了什么问题？
startTransition 和 useTransition 的原理与应用
Lane 模型：任务优先级的内部实现
Hooks 实现原理
Hooks 为什么必须在顶层调用？
useState 和 useEffect 的内部数据结构 (链表)
从源码角度理解 Hooks 的工作机制