一、核心區(qū)別（一句話版本）

• 命令式編程：告訴程序“怎么做”（步驟）
• 聲明式編程（React）：告訴程序“我要什么結(jié)果”

二、用一個(gè)直觀例子對(duì)比

?? 場(chǎng)景：點(diǎn)擊按鈕切換文本

1?? 命令式寫(xiě)法（傳統(tǒng) 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';
  }
});

?? 特點(diǎn)：

• 手動(dòng)操作 DOM
• 自己控制狀態(tài)變化
• 自己負(fù)責(zé)更新 UI

2?? 聲明式寫(xiě)法（React）

function App() {
  const [text, setText] = React.useState('Hello');
  return (
    <>
      <p>{text}</p>
      <button onClick={() => setText(text === 'Hello' ? 'World' : 'Hello')}>
        切換
      </button>
    </>
  );
}

?? 特點(diǎn)：

• 只描述：UI = state 的映射
• 不關(guān)心 DOM 怎么更新
• React 幫你做 diff + 更新

三、思維方式差異（重點(diǎn)）

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

1. 找到 DOM
2. 判斷當(dāng)前值
3. 修改 DOM

你要關(guān)心：

• DOM 查詢(xún)
• DOM 修改
• 狀態(tài)同步問(wèn)題

?? 容易出 bug（尤其復(fù)雜頁(yè)面）

聲明式思維（你在“描述”）

UI = f(state) 

你只關(guān)心：

• state 是什么
• UI 應(yīng)該長(zhǎng)什么樣

?? 剩下的 React 幫你處理

四、為什么 React 一定要聲明式？

核心原因就一個(gè)：復(fù)雜度爆炸時(shí)，命令式扛不住

?? 舉個(gè)真實(shí)場(chǎng)景

一個(gè)頁(yè)面：

• 表格數(shù)據(jù)
• loading 狀態(tài)
• 錯(cuò)誤提示
• 分頁(yè)
• 篩選條件

? 命令式寫(xiě)法

你要：

• 手動(dòng)控制 loading 顯示/隱藏
• 手動(dòng)更新表格 DOM
• 手動(dòng)處理錯(cuò)誤 UI
• 狀態(tài)容易亂

?? 很快變成“屎山”

? React 聲明式

if (loading) return <Loading />;
if (error) return <Error />;
return <Table data={data} />;

?? 清晰、可維護(hù)

五、底層原理（你做前端建議理解）

React 的聲明式依賴(lài)：

?? Virtual DOM（虛擬 DOM）

流程：

state 變化
   ↓
重新 render（生成新虛擬 DOM）
   ↓
diff 算法對(duì)比
   ↓
最小化更新真實(shí) DOM

?? 你不用手動(dòng)操作 DOM

六、優(yōu)缺點(diǎn)總結(jié)

?? 聲明式（React）

優(yōu)點(diǎn)：

• 可讀性高
• 邏輯清晰
• 易維護(hù)
• 適合復(fù)雜 UI

缺點(diǎn)：

• 學(xué)習(xí)成本（狀態(tài)、hooks）
• 性能需要理解優(yōu)化（memo、useCallback）

?? 命令式

優(yōu)點(diǎn)：

• 直接、簡(jiǎn)單
• 性能可控（細(xì)粒度操作）

缺點(diǎn)：

• 難維護(hù)
• 狀態(tài)容易錯(cuò)亂
• 代碼冗余

七、一個(gè)更高級(jí)的理解（建議你掌握）

React 本質(zhì)是：

狀態(tài)驅(qū)動(dòng) UI（State-driven UI）

公式：

UI = f(state) 

這就是聲明式的核心。

八、你可以這樣記（面試用）

?? 一句話總結(jié)：

React 的聲明式編程是通過(guò)描述 UI 與狀態(tài)的關(guān)系，讓框架自動(dòng)完成 DOM 更新，而不是手動(dòng)操作 DOM，從而降低復(fù)雜度，提高可維護(hù)性。

 到此這篇關(guān)于react聲明式編程和命令式編程區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)react聲明式編程和命令式編程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論