React 是由 Facebook(现 Meta)开发和维护的 JavaScript 库,专注解决一个核心问题:如何高效地构建与更新用户界面。它的官方定义是“用于构建用户界面的 JavaScript 库”,这准确反映了它的定位——视图层解决方案,而非全量框架。
视图层专注,生态自由组装
React 只负责 UI 渲染和交互逻辑,不内置路由、全局状态管理、数据请求等能力。这种“只做一件事并把它做好”的哲学,使得 React 轻量灵活,可以与大量第三方库无缝集成,形成适合项目规模和技术偏好的“技术栈”。例如:
- 路由:React Router
- 全局状态:Redux / Zustand
- 数据请求:TanStack Query + Axios
- 构建:Vite / Next.js
这种生态化的选择自由,是 React 长期保持活力的关键。
声明式:描述“是什么”,而非“怎么做”
React 的核心编程范式是声明式(Declarative)。在声明式模型中,开发者只需描述 UI 在不同状态下应该长什么样,React 负责在状态变化时,自动高效地更新界面以匹配描述。你不需要手动操作 DOM,也不需要关心中间步骤。
与之相对的是命令式(Imperative)编程,你必须一步步告诉浏览器“如何做”:创建元素、设置属性、挂载节点、监听变化、手动更新……当交互复杂时,代码会迅速膨胀且难以维护。
示例对比
命令式(原生 JavaScript)
// 获取容器
const container = document.getElementById('app');
// 创建标题
const title = document.createElement('h1');
title.textContent = 'Hello, World!';
container.appendChild(title);
// 创建按钮
const button = document.createElement('button');
button.textContent = '点击我';
button.addEventListener('click', () => {
title.textContent = '你点击了按钮!';
});
container.appendChild(button);
你需要显式创建每个节点,并手动注册事件和更新逻辑。
声明式(React)
function App() {
const [text, setText] = useState('Hello, World!');
return (
<div>
<h1>{text}</h1>
<button onClick={() => setText('你点击了按钮!')}>点击我</button>
</div>
);
}
你只描述了 text 和 UI 的映射关系,点击按钮触发状态变更,React 自动重渲染更新标题。心智负担从“如何逐步修改 DOM”转变为“当前状态下的界面是什么”。
声明式带来的实际价值
- 可预测性:给定相同的 state,渲染结果一定相同,UI 行为变得可推理。
- 可维护性:代码结构更接近 UI 设计稿的意图,修改一处状态影响范围清晰。
- 简化测试:测试只需要关心“输入状态 → 输出视图”,无需模拟复杂的 DOM 操作序列。
- 跨平台抽象:声明式描述不绑定到特定平台(Web DOM),因此 React 可以轻松渲染到 Native、Canvas、VR 等目标。
声明式 ≠ 自动解决所有问题
值得注意的是,React 的声明式仅限于UI 描述与更新。副作用处理(如数据请求、订阅、定时器)仍需要你显式管理(通过 useEffect 等 Hooks)。理解这种边界,才能正确使用 React。
React 通过虚拟 DOM、协调算法等底层机制保障了声明式的高效更新,这些将在后续章节深入展开。现阶段你只需记住:React 让你用“对 UI 的声明”替代“对 DOM 的命令”,从而聚焦业务逻辑,而非繁琐的 DOM 操作。