酷炫的react.js

高效的虛擬DOM:

爲了跟蹤模型層的變化,並且將其應用到DOM中(也就是渲染),我們需要注意兩個 重要的事情:

  1. 數據是什麼時候改變的
  2. 哪一個(些)DOM元素需要被更新

對於(1)而言,React提供了一個觀察者模型用於替代傳統的髒檢查(dirty checking), 也就是持續的檢查模型的變化。這也就是解釋了爲什麼React不需要計算哪些發生 了改變的原因,因爲它會立即知道。這個過程減少了計算量,並它應用程序變得 更平滑。但這裏真正有趣的是,React是如何管理DOM操縱的

對於DOM改變(2)而言,React在內存中構建了DOM的樹形表示,並且計算出哪個 DOM元素應該被改變。對瀏覽器而言,DOM操縱是比較耗費性能的,因此我們更傾向於 讓其變得最小化。幸運的是,React視圖儘可能少的觸及到DOM元素。給予對象表示而言, 更少的DOM操縱意味着計算會更快,因此DOM改變也被儘可能的減少。

React在底層實現了一個diffing算法,該算法使用DOM的樹形表示法,當某個 節點發生變化(標記爲dirty)時它會重新計算整個子樹,你會注意到你的模型發生 了改變,因爲整個子樹在之後會被重新渲染。關於該算法的詳細分析可以參考這篇 文章

服務器渲染:

因爲React在DOM表示時使用了一個虛擬(假的)DOM,因此藉助於這種方式使得在服務端 渲染輸出HTML稱爲可能(不藉助於JSDom, PhantomJS等)。React還能智能的識別出 服務端渲染出來的頁面標記,並在客戶端只爲這些標記添加事件處理器,這對構建 同構web app非常有用。

有意思的是,React渲染出來的HTML標記都包含了data-reactid屬性,這有助於 React中追蹤DOM節點。

組件驅動開發:。。。。。待補充

擁抱ES6:。。。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章