React 编程教程

欢迎学习 React！本教程将带你从零基础开始，逐步掌握 React 的核心知识和技能。

什么是 React？

React 是 Facebook 开发的用于构建用户界面的 JavaScript 库。它具有以下特点：

• 组件化：将 UI 拆分为独立可复用的组件
• 声明式：使用声明式语法描述 UI 状态
• 单向数据流：数据流向清晰，易于理解和调试
• 虚拟 DOM：高效更新实际 DOM，提升性能
• 丰富的生态系统：拥有大量第三方库和工具

为什么学习 React？

1. 市场需求大：React 是最流行的前端框架之一
2. 易于学习：学习曲线相对平缓，文档完善
3. 组件化开发：提高代码复用性和可维护性
4. 社区活跃：丰富的学习资源和开源项目
5. 就业前景好：很多公司使用 React 开发项目

教程目录

基础阶段

• 环境配置 - 创建 React 开发环境
• JSX 语法 - JSX 语法和原理
• 组件基础 - 函数组件和类组件
• Props 和 State - 数据传递和状态管理
• 事件处理 - 事件绑定和处理

进阶阶段

• 基础 Hooks - useState、useEffect、useContext、useRef 等
• 高级 Hooks - useReducer、useLayoutEffect、useTransition 等
• 生命周期 - 组件生命周期详解
• 表单处理 - 受控组件和非受控组件
• 路由系统 - React Router 详解

高级阶段

• 性能优化 - 性能优化技巧
• 高级特性 - Portals、Error Boundary、Suspense
• TypeScript 结合 - TypeScript 与 React

知识速查

• 速查表 - React 常用语法和知识点速查

学习建议

1. 动手实践：每学一个知识点，都要动手编写代码
2. 循序渐进：按照教程顺序学习，不要跳跃
3. 阅读文档：遇到问题查阅 React 官方文档
4. 项目练习：通过实际项目巩固所学知识

参考资源

• React 官方文档
• Create React App
• Vite - 现代前端构建工具
• React 社区

版本说明

本教程基于 React 19 编写，涵盖以下版本的主要特性：

React 18 特性

• 并发渲染：支持可中断渲染，保持 UI 响应性
• Suspense 改进：支持服务端渲染和并发模式
• 自动批处理：自动合并状态更新，减少渲染次数
• useId：生成唯一 ID，支持服务端渲染
• useTransition / useDeferredValue：非阻塞状态更新

React 19 新特性

Actions 和表单处理：

• 支持 async 函数在 transitions 中使用
• <form> 支持 action 属性，自动处理表单提交

新 Hooks：

• useActionState：简化表单状态管理
• useFormStatus：获取父级表单的提交状态
• useOptimistic：实现乐观更新
• use API：在渲染中读取 Promise 和 Context

开发体验改进：

• ref 作为 prop：无需 forwardRef，简化组件编写
• Context 简化：<Context> 可代替 <Context.Provider>
• 文档元数据：支持在组件中渲染 <title>、<meta> 等标签
• 样式表支持：更好的 CSS 加载管理
• 水合错误改进：更清晰的错误提示和差异对比

其他改进：

• ref 回调支持返回清理函数
• useDeferredValue 支持初始值
• 自定义元素完整支持
• 服务端组件和 Server Actions 支持

提示

React 19 于 2024 年 12 月正式发布，建议新项目直接使用 React 19。现有项目可参考官方 升级指南。

准备好开始学习了吗？点击下一章开始你的 React 编程之旅！