「你有沒有想過，當我們呼叫 setState 改變一個小值時，為什麼 React 不會整個網頁重新渲染？」
React 背後有一個秘密武器，叫做 Reconciliation（協調 / Diffing 過程）。

定義

Reconciliation 是 React 的更新流程。
當 component 的 state 或 props 改變時：

1. React 會建立一棵新的 Virtual DOM tree。
2. 拿新的 Virtual DOM 跟舊的 Virtual DOM 比較。
3. 找出差異（diff）。
4. 只更新真實 DOM 中有變化的部分。

👉 目標：最小化 DOM 操作，提高效能。

為什麼需要 Reconciliation？

• 直接操作 DOM 太慢：傳統框架（如 jQuery）常常每次都重繪整個節點。
• Virtual DOM + Diffing：React 透過比對新舊 Virtual DOM，找出差異，再做最少的 DOM 更新。

React Reconciliation 三大規則

規則 1：不同 type → 替換整個 subtree

<div>Hello</div>
→ <p>Hello</p>

React 會直接刪掉 <div> subtree，建立新的 <p>。

規則 2：相同 type → 更新 props，保留 subtree

<div className="red"></div>
→ <div className="blue"></div>

React 保留 <div>，只更新 className。
如果子元素沒變 → 繼續重用。

規則 3：列表依靠 key

<ul>
  <li key="1">A</li>
  <li key="2">B</li>
</ul>

→

<ul>
  <li key="2">B</li>
  <li key="1">A</li>
</ul>

• 有 key → React 知道元素身份沒變，只是順序不同 → 直接移動節點。
• 沒 key → React 會銷毀舊節點，建立新節點 → 造成不必要的重建。

常見錯誤 / 誤解

誤解：React 每次都整棵樹重新渲染 → 其實 React 是「重新計算 Virtual DOM」，但真實 DOM 只改必要部分。
誤解：key 只是「for迴圈需要」 → 其實 key 是元素身份的唯一標識。

小練習

問：下列更新 React 會怎麼處理？

<ul>
  <li key="1">Apple</li>
  <li key="2">Banana</li>
</ul>

→

<ul>
  <li key="2">Banana</li>
  <li key="1">Apple</li>
</ul>

答：
因為有 key，React 會保留原本的兩個 <li>，只是調整位置。

面試回答

English :
Reconciliation is basically how React figures out what to update in the DOM.
When state or props change, React makes a new Virtual DOM and compares it with the old one.
It doesn’t do a heavy deep check — instead, it follows some simple rules:

• If the element type changes, like a <div> to a <p>, React just replaces that whole part.
• If the type is the same, React keeps the node and only updates the props or text.
• For lists, React uses keys to know which items stayed the same and which ones moved or changed.
  With these shortcuts, React can update things quickly without re-rendering everything.

中文 :
Reconciliation 基本上就是 React 判斷 DOM 要更新哪些部分的方式。
當 state 或 props 改變時，React 會產生一個新的 Virtual DOM，並和舊的做比較。
它不會做很耗時的深度比對，而是用一些簡單的規則：

• 如果元素類型改變，例如 <div> 變 <p>，React 就會直接替換整個部分。
• 如果類型一樣，React 會保留節點，只更新 props 或文字。
• 在列表中，React 會用 key 來判斷哪些項目相同，哪些需要移動或改變。
  透過這些簡化的規則，React 能很快更新，而不用每次都重繪整個畫面。

總結

• Reconciliation = React 的更新流程。

• 核心目標：最小化 DOM 更新。

• 三大規則：

  1. 不同 type → 替換整個 subtree
  2. 相同 type → 更新 props
  3. 列表依靠 key

• key 的存在能大幅提升效能，避免不必要的銷毀/重建。