必考點：虛擬DOM樹對比（同級比較、Key的作用、組件類型判斷）

延伸：React 18中并發更新對Diff算法的影響

React虛擬DOM原理及Diff算法優化策略

虛擬DOM核心原理

1. 概念：
   ? 虛擬DOM（Virtual DOM）是一個輕量級的JavaScript對象，用于描述真實DOM的結構。React通過虛擬DOM抽象真實DOM，避免直接操作高成本的真實DOM。
   ? 當組件狀態變化時，React會重新生成新的虛擬DOM樹，并與舊樹進行對比（Diff算法），找出差異后僅更新真實DOM中必要的部分。

2. 優勢：
   ? 性能優化：減少直接操作DOM的次數，通過批量更新和差異化渲染提升性能。
   ? 跨平臺：虛擬DOM可映射到不同平臺（如Web、Native），實現統一開發模式。

---

Diff算法優化策略

React的Diff算法遵循以下核心策略以提升比較效率：

1. 同級比較（Tree Diff）：
   ? 策略：僅對同一層級的節點進行比較，忽略跨層級的移動（如節點從第2層移動到第3層會被視為銷毀后重建）。
   ? 原因：跨層級操作在實際業務中極少出現，此策略將算法復雜度從O(n3)降低到O(n)。

   // 舊樹
   <div><ComponentA />
   </div>// 新樹（ComponentA移動到子層級）
   <div><p><ComponentA /> {/* 會被銷毀并重新創建 */}</p>
   </div>
   

2. Key的作用：
   ? 核心功能：在列表渲染中，通過唯一key標識元素，幫助React識別節點的添加、刪除或順序變化。
   ? 錯誤示例：使用數組索引（index）作為key可能導致狀態錯亂（如列表中間插入元素時）。
   ? 正確用法：

   {items.map(item => (<li key={item.id}>{item.text}</li> // 唯一且穩定的標識
   ))}
   

3. 組件類型判斷：
   ? 策略：若新舊組件類型不同（如從<Button>變為<Link>），直接銷毀舊組件及其子樹，創建新組件。
   ? 意義：避免無效的屬性和狀態對比，確保組件邏輯隔離。

   // 舊組件
   <Button onClick={handleClick} />// 新組件（類型變化）
   <Link onClick={handleClick} /> {/* 觸發完整卸載和掛載 */}
   

---

React 18并發更新對Diff算法的影響

1. 可中斷渲染：
   ? **并發模式（Concurrent Mode）**允許React在Diff過程中暫停渲染，優先處理高優先級任務（如用戶輸入）。
   ? 影響：Diff算法可能分階段執行，需保證中斷后恢復的一致性，避免部分更新導致UI撕裂。

2. 優先級調度：
   ? 策略：根據更新來源（如用戶交互 vs 數據加載）分配優先級，高優先級Diff任務優先執行。
   ? 示例：輸入框輸入時，startTransition標記低優先級更新，確保輸入流暢。

   const [isPending, startTransition] = useTransition();
   const handleInput = (e) => {setInputValue(e.target.value); // 高優先級（立即更新）startTransition(() => {setSearchQuery(e.target.value); // 低優先級（可中斷）});
   };
   

3. 時間切片（Time Slicing）：
   ? 機制：將Diff過程拆分為多個小任務，每幀執行一部分，避免長時間阻塞主線程。
   ? 效果：提升大型應用響應能力，保持動畫和交互的流暢性。

---

總結

? 虛擬DOM核心：通過JS對象抽象DOM，結合Diff算法實現高效更新。
? Diff優化：同級比較、Key標識、組件類型判斷是三大核心策略。
? React 18進階：并發模式引入可中斷渲染和優先級調度，使Diff過程更智能，適應復雜交互場景。