反應差異演算法

生成將一個樹轉換為另一個樹的最小運算元具有 O（n ^ 3）的複雜度，其中 n 是樹中的節點數。React 依賴於兩個假設來線上性時間內解決這個問題 - O(n)

1. 同一類的兩個元件將生成類似的樹，不同類的 tw 元件將生成不同的樹。

2. 可以為在不同渲染中穩定的元素提供唯一鍵。

為了確定兩個節點是否不同，React 區分 3 個案例

1. 如果它們具有不同的型別，則兩個節點是不同的。

• 例如，<div>...</div> 與 <span>...</span> 不同

2. 每當兩個節點具有不同的金鑰時

• 例如，<div key="1">...</div> 與 <div key="2">...</div> 不同

此外，如果你想要優化效能，以下內容至關重要且非常重要

如果它們[兩個節點]的型別不同，React 甚至不會嘗試匹配它們渲染的內容。它只是從 DOM 中刪除第一個並插入第二個。

這就是原因

元素不太可能生成一個看起來像生成的 DOM。React 不是花時間嘗試匹配這兩個結構，而是從頭開始重新構建樹。