1. React 是什么

本节目标：搞清楚 React 是干嘛的、它解决什么问题、和 Vue/Angular 有啥区别，建立第一印象。

一句话解释

React 是一个构建用户界面的 JavaScript 库。注意，它不是”框架”——官方自称”库”，因为它只专注于 UI 层，不管路由、状态管理这些事。

它由 Facebook（现在的 Meta）在 2013 年开源，目前最新版本是 React 19.2.8。React 19 引入了 Server Components、Actions、use Hook、React Compiler 等重要新特性。

三个核心思想

声明式（Declarative）

声明式就是描述”长什么样”，而不是”怎么一步步变”。

比如你想让一个按钮显示点击次数。命令式写法（原生 JS）像这样：

const button = document.querySelector('button');
let count = 0;
button.addEventListener('click', () => {
  count += 1;
  button.textContent = `点了 ${count} 次`;
});

React 的声明式写法：

function MyButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      点了 {count} 次
    </button>
  );
}

你只写”count 是多少就显示多少”，React 负责把 DOM 更新到位。脑子不用想”先找到元素、再改文本”这些过程。

组件化（Component-Based）

组件是 React 的最小单元。一个组件就是一段独立的 UI，有自己的外观和逻辑。

你可以把组件理解成乐高积木——按钮是积木、卡片是积木、整个页面也是积木。搭起来就是完整的应用。

function App() {
  return (
    <PageLayout>
      <Header />
      <Sidebar />
      <MainContent />
    </PageLayout>
  );
}

每个组件可以单独开发、测试、复用。一个按钮组件写一次，到处用。

一次学习，随处编写

React 的设计理念是”Learn Once, Write Anywhere”。学会 React 后，你可以做 Web 应用（React DOM）、移动端应用（React Native）、甚至 VR 内容（React VR）。

虚拟 DOM 是怎么回事

直接操作 DOM 很慢。React 的解决方案是：在内存中维护一个 JavaScript 对象树（虚拟 DOM），每次状态变化时先在虚拟 DOM 上算出差异，再一次性更新真实 DOM。

这个过程叫协调（reconciliation）。你不需要知道它内部怎么实现的，只需要记住：React 会帮你高效地更新界面。

Tip

虚拟 DOM 不是银弹。它的真正价值在于让你用声明式写法，不用手动操作 DOM。性能优化是附带的好处。

React 在前端生态中的定位

维度	React	Vue	Angular
类型	库	渐进式框架	完整框架
模板语法	JSX	模板语法	模板语法
状态管理	外部库（Redux/Zustand）	官方推荐（Pinia）	内置（Service）
学习曲线	中等	平缓	陡峭
就业市场	非常广	广	较广

React 最大的优势是生态庞大和社区活跃。遇到问题基本都能搜到解决方案。

为什么选 React

就业好：国内外大厂都在用，岗位多
社区大：第三方库丰富，踩坑有人趟过
灵活：不强制你用哪种路由、哪种状态管理，自己选
性能不错：虚拟 DOM + Fiber 架构，大多数场景够用

Note

React 不是万能的。如果你需要”开箱即用”的完整方案，Next.js（基于 React 的框架）可能更适合。但学 React 是学 Next.js 的前提。

你需要的前置知识

开始学 React 之前，确保你掌握：

HTML/CSS — 能写基本页面
JavaScript（ES6+） — 箭头函数、解构、模块化、Promise
基础命令行 — 会用终端执行命令

如果 JavaScript 还不熟，建议先补一补。React 代码里到处是 =>、...、import/export。

本节小结

React 是 Facebook 出的 UI 库，声明式 + 组件化
核心概念：声明式、组件化、虚拟 DOM（协调）
前置知识：HTML、CSS、ES6 JavaScript
React 只管 UI，不管路由和状态管理