深入解析

本章內容及圖片參考 作者 Josh Haberman React Demystified 一文,以下將說明 React 運作的概念。

traditional

傳統方法會用 native javascript 或是 jQuery 經由 dom 的事件監聽及節點操作來更新畫面。

React

我們知道使用傳統的方式對 dom 進行頻繁異動查詢與處理是很耗效能的行為,因此 React 設計了 Virtual Dom 這個中間層來降低 dom 操作的成本。React 本身在 Virtual Dom 的內部產生的一個類似實際 dom 節點的樹狀結構,當有資料異動發成時會透過內部 diff 演算法計算最小實際節點的差異後才會實際的計算後的結果更新的實際的節點上。