跳到主要內容
← 回到學習

學習 · 面試考題

diff演算法 與 React的key值

By Kurau3 分鐘閱讀

目錄 · 3 個段落
  1. 01什麼是 Diff 演算法？
  2. 02React 的 Diff 策略（三個假設）
  3. 03Key 值的重要性
15張圖，20分鐘吃透Diff演算法核心原理，我說的！！！ - 掘金
前言 大家好，我是林三心，在日常面試中，Diff演算法都是繞不過去的一道坎，用最通俗的話，講最難的知識點一直是我寫文章的宗旨，今天我就用通俗的方式來講解一下Diff演算法吧？Lets Go 什麼是虛擬DO https://juejin.cn/post/6994959998283907102

什麼是 Diff 演算法？

Diff 演算法用於比較兩棵虛擬 DOM 樹的差異，只更新需要改變的部分，而非重新渲染整棵樹。

React 的 Diff 策略（三個假設）

  1. 同層比較：只比較同一層級的節點，不跨層級比較（O(n) 複雜度）
  2. 類型不同直接替換：若元素類型不同（如 <div> 變 <span>），直接銷毀舊節點並建立新節點
  3. Key 值輔助識別：透過 key 來判斷哪些元素是相同的，只是位置改變

Key 值的重要性

// ❌ 用 index 當 key（列表有增刪時會出問題）
{items.map((item, index) => <li key={index}>{item}</li>)}
 
// ✅ 用唯一且穩定的 id 當 key
{items.map((item) => <li key={item.id}>{item.name}</li>)}
jsx

為什麼不該用 index 當 key？

當列表發生插入或刪除時，index 會改變，導致 React 錯誤地認為元素發生了變化，可能造成：

  • 不必要的重新渲染
  • 元件狀態錯亂（如輸入框的值跑到其他列）
  • 動畫異常

目錄