快速理解 React 基礎：Reconciliation

發表於 分類於 ， Disqus：
快速理解 React Reconciliation

核心思想: 在記憶體裡比對速度很快，但更新到 DOM 上的成本很高
所以應盡可能的最小化 DOM 的異動以達到高效

Reconciliation 具體流程

  1. 產生出整棵 React element tree，存在記憶體，這個速度非常的快。因為只是 plain JavaScript object。
    • 這棵樹也叫做 Virtual DOM Tree (React 16.3後，改名 Fiber Tree。為避免與舊版混淆，故換個名字)
  2. 當樹改變時，重新產出一棵新的樹，透過diffing Algorithm找出差異。此演算法可將 O(n^3) -> O(n)
  3. 將差異更新到 DOM 上

Diffing Algorithm

  1. 不同節點，直接產生不同的樹，不偵測差異，而是直接取代。為相同節點時，再去比對屬性差異
  2. 若是 list 的改變，指定 keys 以增加效能(尤其是從前面插入資料)。key 只需要在兄弟節點(sibling node)唯一，不必全局唯一

比對差異時，會是 Top-down 遞迴比對

參考資料

react reconciliation
YouTube / How Does React Actually Work? React.js Deep Dive #1