React
React的優(yōu)點(diǎn)有很多，現(xiàn)在很多應(yīng)用都接入React這個(gè)框架。
在我看來，有下列優(yōu)點(diǎn)：
- Facebook團(tuán)隊(duì)研發(fā)并維護(hù)——有團(tuán)隊(duì)維護(hù)更新且有質(zhì)量保證
- 在MVVM結(jié)構(gòu)下只起View的作用——簡(jiǎn)單接入，不需要花費(fèi)大量人力重構(gòu)代碼
- 組件化形式構(gòu)建Web應(yīng)用——復(fù)用性強(qiáng)，提高開發(fā)效率
- 用Virtual DOM減少對(duì)DOM的頻繁操作提高頁面性能——批量操作減少重排（reflows）和重繪(repaints)次數(shù)——性能對(duì)比舊的方式有提高
React對(duì)重排和重繪的提高
雅虎性能優(yōu)化比較重要的點(diǎn)，老司機(jī)自行忽略。
如下圖，HTML被瀏覽器解析為DOM樹，CSS代碼加載進(jìn)來解析為樣式結(jié)構(gòu)體，兩者關(guān)聯(lián)組成渲染樹，之后瀏覽器把渲染樹繪制出來就是我們看到的網(wǎng)頁了。這里如果我們對(duì)DOM樹或者樣式結(jié)構(gòu)體做一些操作，如刪除某個(gè)節(jié)點(diǎn)，樣式改為隱藏（display:none）等等，會(huì)觸發(fā)重排進(jìn)而導(dǎo)致重繪。
觸發(fā)重排的條件
- DOM元素的數(shù)量屬性變化
- DOM樹的結(jié)構(gòu)變化——節(jié)點(diǎn)的增減、移動(dòng)
-
某些布局屬性的讀取和設(shè)置觸發(fā)重排——offsetTop/offsetWidth/scrollTop等等
導(dǎo)致子級(jí)、后續(xù)兄弟元素、父節(jié)點(diǎn)因重新計(jì)算布局而重排
觸發(fā)重繪的條件
- 簡(jiǎn)單樣式屬性的變化——顏色、背景色等
- 重排導(dǎo)致的重繪
而React維護(hù)了一個(gè)Virtual DOM將短時(shí)間的操作合并起來一起同步到DOM，所以這也是它對(duì)整個(gè)前端領(lǐng)域提出的最重要的改變。
為什么引入Reflux？
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式