一、它是什么
React 是一个用来构建用户界面（UI）的 JavaScript 库，主要由 Facebook（现在的 Meta）开发和维护。 它最常用来做单页应用（SPA） 里的前端界面，比如后台管理系统、各种 Web App、复杂交互页面等。
React 的核心特点可以概括为三点：
- 组件化：页面被拆成一个个可复用的组件（按钮、表单、列表、弹窗……）
- 声明式：你只需要描述“界面在某个状态下应该长什么样”，不用手动一步步操作 DOM
- 数据（状态）驱动视图：数据（state）变了，界面自动更新
一句话：React = 用组件 + 状态 来描述 UI 的工具。
1.1 它出现的背景
在 React 出现之前，前端常见做法是：
-
用 jQuery / 原生 JS
-
手动操作 DOM：
$('#list').append(...) $('#btn').hide() $('#title').text(...) -
页面一复杂，就会变成：
- 逻辑分散在各处
- 状态和 UI 同步很容易出 bug
- 改一个地方，可能影响一堆地方
- 维护成本爆炸 🤯
本质问题是：
UI 是状态的映射，但我们却在“手动维护这个映射关系”
比如：
- 登录 / 未登录
- 加载中 / 加载完成
- 列表新增 / 删除 / 排序 这些状态一多，靠人脑去“记住什么时候该改哪些 DOM”，非常容易乱。
1.2 什么是“声明式”
组件化、数据驱动视图 很好理解，不过多描述；
声明式 它是React（以及现代前端）最核心的思想之一；
1.2.1 声明式（Declarative）的意思是：
你只需要“描述结果长什么样”， 不需要“描述一步一步怎么做到”。
对比一下：
-
声明式：
现在是登录态 → 显示用户信息 现在是未登录 → 显示登录按钮
-
命令式（传统 DOM 操作）：
先隐藏登录按钮 再创建用户信息 DOM 插入到某个节点 如果切回未登录，再把这些 DOM 删掉……
1.2.2 用生活例子理解
想象你去餐厅点菜：
-
👨🍳 命令式： “先切菜 → 再开火 → 放油 → 翻炒 → 装盘” （你在指挥每一步怎么做）
这种状态下开发者的身份：厨师 + 食客（顾客）
-
🧑💼 声明式： “我要一份宫保鸡丁” （你只关心结果，过程交给厨师）
这种状态下开发者的身份：顾客（食客）；
React 就是那个厨师 👨🍳 你只说：我要什么 UI，它帮你搞定怎么更新 DOM。
1.2.3 代码对比：命令式 vs 声明式
❌ 命令式（原生 / jQuery 思路）
if (isLogin) {
loginBtn.style.display = "none";
userInfo.style.display = "block";
userName.innerText = name;
} else {
loginBtn.style.display = "block";
userInfo.style.display = "none";
}
你要：
- 自己找 DOM
- 自己控制显示隐藏
- 自己保证状态和 UI 不打架
- 状态一多，分支爆炸 💥
✅ 声明式（React 思路）
function App({ isLogin, name }) {
return (
<div>
{isLogin ? <UserInfo name={name} /> : <LoginButton />}
</div>
);
}
你只是在声明：
如果 isLogin 为 true，UI 就是 UserInfo 否则，UI 就是 LoginButton
至于：
- 之前 DOM 长啥样？
- 现在要改哪些？
- 是新增、删除还是更新？
👉 React 帮你算和处理。
1.2.4 结合 数据驱动视图 理解：
UI 是 state 的函数（UI = f(state)） 你负责描述：在“当前数据状态”下，界面应该长什么样 React 负责：当数据变了，计算差异并更新 DOM
注意一个小细节：
不是一定要"提前把每一种状态的视图都写死成分支”，而是：
- 你写的是一个 “从 state 到 UI 的映射函数” — 对应
组件化 - state 变了 → 这个函数重新执行 → 得到新的 UI 描述
- React 对比新旧结果 → 最小化更新 DOM
1.2.5 声明式 - 总结
命令式 UI：
- 我告诉浏览器：第一步干嘛，第二步干嘛，第三步干嘛
- 我负责过程
- 容易乱、容易漏、难维护
声明式 UI：
- 我只告诉 React：现在这种状态下，界面就该长这样
- React 负责过程
- 状态一变，UI 自动跟着变
- 代码更直观、更好维护
二、它解决了什么痛点
1. UI = f(state)
在 React 里你只需要写：
当前状态下，界面应该长这样
function App() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}
当 count 变了：
- 你不用手动操作 DOM
- React 会帮你自动更新界面
核心思想：
React 是： 数据 → 视图 的函数 你维护数据，React 负责把 DOM 变成“该有的样子”。
更口语化：你只管数据变不变，界面怎么变是 React 的事
2. 解决“复杂页面难维护”的问题（组件化）
以前：
- HTML / JS / CSS 混在一起
- 一个页面几千行，改起来像拆炸弹
React：
-
页面拆成一个个组件
-
每个组件：
- 管自己的 UI
- 管自己的逻辑
- 可以复用
-
大型项目结构会清晰很多
3. 降低心智负担：从“怎么改 DOM” → “状态变了会怎样”
以前你要想的是：
点按钮 → 改这个 DOM → 再改那个 DOM → 注意别漏了那个 DOM
现在你想的是：
点按钮 → 改状态 → 界面自然变成新状态对应的样子
关注点从“操作过程”变成“结果描述” ，这就是声明式的价值。
三、总结
React 的出现主要是为了解决：
- ❌ 手动操作 DOM 导致的复杂度爆炸
- ❌ UI 和状态同步困难、容易出 bug
- ❌ 大型前端项目难以维护的问题
它的核心解法是：
- 用组件化 + 状态驱动 + 声明式 UI
- 让开发者专注“数据和结构”，而不是“怎么操作 DOM”
