react声明式编程和命令式编程区别小结

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

• 命令式编程：告诉程序“怎么做”（步骤）
• 声明式编程（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，从而降低复杂度，提高可维护性。

 到此这篇关于react声明式编程和命令式编程区别小结的文章就介绍到这了,更多相关react声明式编程和命令式编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论