一、核心区别（一句话版本）

• 命令式编程：告诉程序“怎么做”（步骤）

• 声明式编程（React）：告诉程序“我要什么结果”

---

二、用一个直观例子对比

🧱 场景：点击按钮切换文本

---

1️⃣ 命令式写法（传统 DOM 操作）

const btn = document.getElementById('btn');
const text = document.getElementById('text');

btn.addEventListener('click', () => {
  if (text.innerText === 'Hello') {
    text.innerText = 'World';
  } else {
    text.innerText = 'Hello';
  }
});

👉 特点：

• 手动操作 DOM

• 自己控制状态变化

• 自己负责更新 UI

---

2️⃣ 声明式写法（React）

function App() {
  const [text, setText] = React.useState('Hello');

  return (
    <>
      <p>{text}</p>
      <button onClick={() => setText(text === 'Hello' ? 'World' : 'Hello')}>
        切换
      </button>
    </>
  );
}

👉 特点：

• 只描述：UI = state 的映射

• 不关心 DOM 怎么更新

• React 帮你做 diff + 更新

---

三、思维方式差异（重点）

命令式思维（你在“操控”）

1. 找到 DOM
2. 判断当前值
3. 修改 DOM

你要关心：

• DOM 查询

• DOM 修改

• 状态同步问题

👉 容易出 bug（尤其复杂页面）

---

声明式思维（你在“描述”）

UI = f(state)

你只关心：

• state 是什么

• UI 应该长什么样

👉 剩下的 React 帮你处理

---

四、为什么 React 一定要声明式？

核心原因就一个：复杂度爆炸时，命令式扛不住

---

🧠 举个真实场景

一个页面：

• 表格数据

• loading 状态

• 错误提示

• 分页

• 筛选条件

---

❌ 命令式写法

你要：

• 手动控制 loading 显示/隐藏

• 手动更新表格 DOM

• 手动处理错误 UI

• 状态容易乱

👉 很快变成“屎山”

---

✅ React 声明式

if (loading) return <Loading />;
if (error) return <Error />;

return <Table data={data} />;

👉 清晰、可维护

---

五、底层原理（你做前端建议理解）

React 的声明式依赖：

🔹 Virtual DOM（虚拟 DOM）

流程：

state 变化
   ↓
重新 render（生成新虚拟 DOM）
   ↓
diff 算法对比
   ↓
最小化更新真实 DOM

👉 你不用手动操作 DOM

---

六、优缺点总结

👍 声明式（React）

优点：

• 可读性高

• 逻辑清晰

• 易维护

• 适合复杂 UI

缺点：

• 学习成本（状态、hooks）

• 性能需要理解优化（memo、useCallback）

---

👍 命令式

优点：

• 直接、简单

• 性能可控（细粒度操作）

缺点：

• 难维护

• 状态容易错乱

• 代码冗余

---

七、一个更高级的理解（建议你掌握）

React 本质是：

状态驱动 UI（State-driven UI）

公式：

UI = f(state)

这就是声明式的核心。

---

八、你可以这样记（面试用）

👉 一句话总结：

React 的声明式编程是通过描述 UI 与状态的关系，让框架自动完成 DOM 更新，而不是手动操作 DOM，从而降低复杂度，提高可维护性。