爲了解決 UI 和數據同步複雜性的問題,Data Binding 被提出並獲得了普遍應用。其中兩個主要的流派是:
Key Value Observable (KVO),以 Ember、Meteor 和 Knockout 爲表明
Dirty Check,主要以 Angular 爲表明
傳統的 Data Binding 實如今渲染 DOM 以後,須要不斷從數據側和 DOM 自己檢測變化從而完成 UI 和數據的雙向同步。React 則選擇了另一條徹底不一樣的路:單向渲染,或者更加本質地來講
React就像是一個純函數,只會根據用戶提供的數據構建出符合預期的UI。數據改變是經過從新調用render方法來實現UI的刷新(與雙向數據綁定有本質的區別)。瀏覽器
每次render都採用徹底更新的方式是不可接受的,當前瀏覽器的性能並不足以在這種狀況下提供能夠容忍的使用體驗。
React經過 在Js和Dom之間增長了一個新的抽象表示層,在須要更新時,對比這一表示層的diff,從而實現 差量更新Dom。
能夠這樣評價虛擬 DOM:正是這一技術使得 React 在保持單向渲染理念的同時,在性能上和 Data Binding 方案保持在同一水準dom
React 在每次 收到數據更新以後,會進行一次 調和過程 並一次性更新 DOM,這在通常狀況下不存在顯著的性能瓶頸。但在一些須要 UI 快速響應的場景中,例如動畫、手勢等,當 DOM 的更新量較多或者 JS 邏輯較爲複雜時,就會引發卡頓等有損體驗的狀況。
Fiber 已經成爲了做爲 新一代調和過程的基礎
Fiber 的主要特性是 支持增量渲染:可以 將渲染工做分割爲小塊,而且將它們分散到多個幀中。
原調和過程會 沿組件樹遞歸遍歷,遇到須要更新的狀況時直接更新 DOM。因爲 JS 和樣式計算、佈局(Layout)以及許多狀況下的繪製 共享瀏覽器主線程,若是有的組件執行時間較長,就會致使一些須要快速響應的更新被阻塞,進而致使卡頓等有損用戶體驗的現象
新的基於 Fiber 的調和過程 將原來的遞歸遍歷打散,能夠每次只計算部分節點的更新內容後回到主邏輯查看是否有須要當即更新的高優先級內容,從而可以實現快速響應。
原文: React 設計中的閃光點函數