react的核心是虛擬dom和diff算法 ## 虛擬DOM（Virtual DOM） React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然后React將當前整個DOM樹和上一次的DOM樹進行對比（diff算法），得到DOM結構的區別，然后僅僅將需要變化的部分進行實際的瀏覽器DOM更新。 而且React能夠批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合并， ## diff算法 diff算法可以將樹的比對復雜度從O（n^3）降低到O(n)，從而大大提高性能 ## diff策略 1. Web UI 中 DOM 節點跨層級的移動操作特別少，可以忽略不計。 2. 擁有相同類的兩個組件將會生成相似的樹形結構，擁有不同類的兩個組件將會生成不同的樹形結構。 3. 對于同一層級的一組子節點，它們可以通過唯一 id 進行區分。 基于以上三個前提策略，React 分別對 tree diff、component diff 以及 element diff 進行算法優化， ### tree diff 對樹進行分層比較，兩棵樹只會對同一層次的節點進行比較 ### component diff 如果是同一類型的組件，按照原策略繼續比較 virtual DOM tree。 如果不是，則將該組件判斷為 dirty component，從而替換整個組件下的所有子節點。 ### element diff 當節點處于同一層級時，React diff 提供了三種節點操作，分別為：INSERT_MARKUP（插入）、MOVE_EXISTING（移動）和 REMOVE_NODE（刪除）。 ***** ##### 參考 [參考](https://zhuanlan.zhihu.com/p/20346379)