第一章:前言与课程介绍
1.1 什么是 React
React 是由 Facebook(现 Meta)开发的开源 JavaScript 库,用于构建用户界面。它由 Jordan Walke 创建,于 2013 年 5 月开源发布。React 采用组件化开发思想,让你可以将 UI 拆分为独立、可复用的代码片段。
React 的核心特点:
- 声明式编程:你只需要描述界面应该是什么样子,React 会自动处理 DOM 更新
- 组件化:将 UI 拆分为独立的、可复用的组件
- 学习一次,随处编写:React 可以用于 Web、移动端(React Native)、桌面端(Electron)等多个平台
- 单向数据流:数据从父组件流向子组件,便于追踪和调试
1.2 为什么选择 React
React 已成为目前最流行的前端框架之一,根据 Stack Overflow 和 GitHub 的统计数据,React 在开发者满意度、就业市场需求、社区活跃度等方面都名列前茅。
就业市场需求:
LinkedIn、Indeed 等招聘网站的数据显示,React 开发者的需求量持续走高。掌握 React 意味着更多的就业机会和更高的薪资水平。
生态系统成熟:
React 拥有庞大而成熟的生态系统:
- 路由:React Router 是行业标准
- 状态管理:Redux、MobX、Zustand、Recoil 等多种选择
- UI 组件库:Material-UI、Ant Design、Chakra UI 等
- 服务端渲染:Next.js、Remix 等框架
- 移动端:React Native 让你用相同的技能开发 iOS/Android 应用
- 测试工具:Jest、React Testing Library、Cypress 等
性能优秀:
React 使用虚拟 DOM(Virtual DOM)技术,通过 Diff 算法最小化实际 DOM 操作,大幅提升应用性能。Fiber 架构的引入让 React 能够更好地处理大型应用和复杂动画。
社区活跃:
React 拥有全球最活跃的开源社区之一。遇到问题时,你几乎总能在 Stack Overflow、GitHub Issues 或各种技术博客中找到解决方案。
1.3 React 的版本演进
React 0.x(2013-2015):
最初的 React 版本,引入了 JSX、组件、虚拟 DOM 等核心概念。这个时期的 React 还在快速迭代中,API 经常变化。
React 15(2016):
这是一个重要的稳定版本。React 团队重构了核心算法,提升了性能和稳定性。
React 16 - Fiber(2017):
这是 React 历史上最重要的更新之一。Fiber 架构的引入彻底重写了 React 的核心协调算法,带来了:
- 更流畅的动画和交互
- 支持异步渲染
- 更好的错误处理(Error Boundaries)
- Portals 等新特性
React 16.8 - Hooks(2019):
Hooks 的引入是 React 开发方式的重大变革。它让函数组件拥有了状态和其他 React 特性,极大地简化了代码:
- useState - 状态管理
- useEffect - 副作用处理
- useContext - 上下文消费
- useReducer - 复杂状态逻辑
- 以及自定义 Hooks
React 17(2020):
这是一个“无新特性”的版本,主要关注渐进式升级。React 17 让多个版本的 React 可以在同一个应用中共存,为大型应用的升级提供了便利。
React 18(2022):
React 18 引入了并发特性(Concurrent Features):
- 自动批处理(Automatic Batching)
- Suspense 的改进
- Transitions API
- 新的 Hooks:useId、useDeferredValue、useTransition
- React Server Components(实验性)
React 19(2024):
最新的 React 版本带来了更多改进:
- React Compiler(自动记忆化)
- Server Actions
- Document Metadata API
- Asset Loading API
- Web Components 支持
1.4 本教程的学习方法
理论与实践结合:
每章都包含理论讲解和代码示例。不要只是阅读,一定要动手敲代码。
项目驱动:
教程后半部分会通过一个完整的项目,将所学知识串联起来。
深度与广度兼顾:
既会讲解 React 的基础用法,也会深入源码层面解释原理。
配套资源:
- 所有代码示例
- 课后练习题
- 参考答案
- 扩展阅读材料
1.5 前置知识要求
在学习 React 之前,你需要具备以下基础知识:
HTML/CSS:
- 熟悉 HTML 标签和语义化
- 掌握 CSS 选择器、盒模型、Flexbox、Grid
- 了解响应式设计
JavaScript(ES6+):
- 变量声明:let、const
- 箭头函数
- 解构赋值
- 模板字符串
- 数组方法:map、filter、reduce
- Promise 和 async/await
- 模块化:import/export
- 类和继承
- 展开运算符
如果你对这些内容还不熟悉,建议先补充 JavaScript 基础。
1.6 开发工具准备
代码编辑器:
推荐使用 VS Code,配合以下插件:
- ESLint - 代码检查
- Prettier - 代码格式化
- ES7+ React/Redux/React-Native snippets - 代码片段
- Auto Rename Tag - 自动重命名标签
浏览器:
推荐使用 Chrome 或 Edge,安装 React Developer Tools 扩展。
Node.js:
React 开发需要 Node.js 环境。建议安装 LTS(长期支持)版本。
1.7 总结
本章介绍了 React 的基本情况、版本历史和学习方法。React 是一个强大而灵活的前端库,掌握它将极大提升你的前端开发能力。
接下来,我们将从 React 的核心概念开始,逐步深入。