React
React的優(yōu)點有很多，現(xiàn)在很多應用都接入React這個框架。
在我看來，有下列優(yōu)點：
- Facebook團隊研發(fā)并維護——有團隊維護更新且有質(zhì)量保證
- 在MVVM結(jié)構(gòu)下只起View的作用——簡單接入，不需要花費大量人力重構(gòu)代碼
- 組件化形式構(gòu)建Web應用——復用性強，提高開發(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ā)重排進而導致重繪。
觸發(fā)重排的條件
- DOM元素的數(shù)量屬性變化
- DOM樹的結(jié)構(gòu)變化——節(jié)點的增減、移動
-
某些布局屬性的讀取和設(shè)置觸發(fā)重排——offsetTop/offsetWidth/scrollTop等等
導致子級、后續(xù)兄弟元素、父節(jié)點因重新計算布局而重排
觸發(fā)重繪的條件
- 簡單樣式屬性的變化——顏色、背景色等
- 重排導致的重繪
而React維護了一個Virtual DOM將短時間的操作合并起來一起同步到DOM，所以這也是它對整個前端領(lǐng)域提出的最重要的改變。
