第一章:前言与课程介绍

React 是由 Facebook(现 Meta)开发的开源 JavaScript 库,用于构建用户界面。它由 Jordan Walke 创建,于 2013 年 5 月开源发布。React 采用组件化开发思想,让你可以将 UI 拆分为独立、可复用的代码片段。

React 的核心特点:

  • 声明式编程:你只需要描述界面应该是什么样子,React 会自动处理 DOM 更新
  • 组件化:将 UI 拆分为独立的、可复用的组件
  • 学习一次,随处编写:React 可以用于 Web、移动端(React Native)、桌面端(Electron)等多个平台
  • 单向数据流:数据从父组件流向子组件,便于追踪和调试

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 或各种技术博客中找到解决方案。

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 支持

理论与实践结合

每章都包含理论讲解和代码示例。不要只是阅读,一定要动手敲代码。

项目驱动

教程后半部分会通过一个完整的项目,将所学知识串联起来。

深度与广度兼顾

既会讲解 React 的基础用法,也会深入源码层面解释原理。

配套资源

  • 所有代码示例
  • 课后练习题
  • 参考答案
  • 扩展阅读材料

在学习 React 之前,你需要具备以下基础知识:

HTML/CSS

  • 熟悉 HTML 标签和语义化
  • 掌握 CSS 选择器、盒模型、Flexbox、Grid
  • 了解响应式设计

JavaScript(ES6+)

  • 变量声明:let、const
  • 箭头函数
  • 解构赋值
  • 模板字符串
  • 数组方法:map、filter、reduce
  • Promise 和 async/await
  • 模块化:import/export
  • 类和继承
  • 展开运算符

如果你对这些内容还不熟悉,建议先补充 JavaScript 基础。

代码编辑器

推荐使用 VS Code,配合以下插件:

  • ESLint - 代码检查
  • Prettier - 代码格式化
  • ES7+ React/Redux/React-Native snippets - 代码片段
  • Auto Rename Tag - 自动重命名标签

浏览器

推荐使用 Chrome 或 Edge,安装 React Developer Tools 扩展。

Node.js

React 开发需要 Node.js 环境。建议安装 LTS(长期支持)版本。

本章介绍了 React 的基本情况、版本历史和学习方法。React 是一个强大而灵活的前端库,掌握它将极大提升你的前端开发能力。

接下来,我们将从 React 的核心概念开始,逐步深入。

该主题尚不存在

您访问的页面并不存在。如果允许,您可以使用创建该页面按钮来创建它。

  • react/前言.txt
  • 最后更改: 2026/03/13 15:49
  • 张叶安