React

React的優(yōu)點有很多,現(xiàn)在很多應(yīng)用都接入React這個框架。 
在我看來,有下列優(yōu)點: 
- Facebook團隊研發(fā)并維護——有團隊維護更新且有質(zhì)量保證 
- 在MVVM結(jié)構(gòu)下只起View的作用——簡單接入,不需要花費大量人力重構(gòu)代碼 
- 組件化形式構(gòu)建Web應(yīng)用——復(fù)用性強,提高開發(fā)效率 
- 用Virtual DOM減少對DOM的頻繁操作提高頁面性能——批量操作減少重排(reflows)和重繪(repaints)次數(shù)——性能對比舊的方式有提高

React對重排和重繪的提高

雅虎性能優(yōu)化比較重要的點,老司機自行忽略。 
如下圖,HTML被瀏覽器解析為DOM樹,CSS代碼加載進來解析為樣式結(jié)構(gòu)體,兩者關(guān)聯(lián)組成渲染樹,之后瀏覽器把渲染樹繪制出來就是我們看到的網(wǎng)頁了。這里如果我們對DOM樹或者樣式結(jié)構(gòu)體做一些操作,如刪除某個節(jié)點,樣式改為隱藏(display:none)等等,會觸發(fā)重排進而導(dǎo)致重繪。 

觸發(fā)重排的條件

  • DOM元素的數(shù)量屬性變化
  • DOM樹的結(jié)構(gòu)變化——節(jié)點的增減、移動
  • 某些布局屬性的讀取和設(shè)置觸發(fā)重排——offsetTop/offsetWidth/scrollTop等等 
    導(dǎo)致子級、后續(xù)兄弟元素、父節(jié)點因重新計算布局而重排

觸發(fā)重繪的條件

  • 簡單樣式屬性的變化——顏色、背景色等
  • 重排導(dǎo)致的重繪

而React維護了一個Virtual DOM將短時間的操作合并起來一起同步到DOM,所以這也是它對整個前端領(lǐng)域提出的最重要的改變。

為什么引入Reflux?

延伸閱讀

學習是年輕人改變自己的最好方式-Java培訓(xùn),做最負責任的教育,學習改變命運,軟件學習,再就業(yè),大學生如何就業(yè),幫大學生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學習是年輕人改變自己的最好方式