React 背景知識(shí)
React 是一個(gè)用于構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，但可以使用 React 作為 MVC 架構(gòu)的 View 層輕易的在已有項(xiàng)目中使用，它是一個(gè)用于構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)，起源于 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站，于 2013 年 5 月開(kāi)源。React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開(kāi)始關(guān)注和使用它。
以前沒(méi)有 ajax 技術(shù)的時(shí)候，web 頁(yè)面從服務(wù)端整體渲染出 html 輸出到瀏覽器端進(jìn)行渲染，同樣的，用戶(hù)的一個(gè)改變頁(yè)面的操作也會(huì)刷新整個(gè)頁(yè)面來(lái)完成。直到有了 ajax 出現(xiàn)，實(shí)現(xiàn)頁(yè)面局部刷新，帶來(lái)的高效和分離讓 web 開(kāi)發(fā)者們驚嘆不已。但隨之而來(lái)的問(wèn)題是，復(fù)雜的用戶(hù)交互及展現(xiàn)需要通過(guò)大量的 DOM 操作來(lái)完成，這讓頁(yè)面的性能以及開(kāi)發(fā)的效率又出現(xiàn)了新的瓶頸。
時(shí)至今日，談到前端性能優(yōu)化，減少 DOM 元素、減少 reflow 和 repaint、編碼過(guò)程中盡量減少 DOM 的查詢(xún)等手段是大家耳熟能詳?shù)?。而?yè)面任何UI的變化都是通過(guò)整體刷新來(lái)完成的。幸運(yùn)的是，React 通過(guò)自己實(shí)現(xiàn)的 DOM Diff 算法，計(jì)算出虛擬頁(yè)面當(dāng)前版本和新版本之間的差異，最小化重繪，避免不必要的 DOM 操作，解決了這兩個(gè)公認(rèn)的前端性能瓶頸，實(shí)現(xiàn)高效 DOM 渲染。
我們知道，頻繁的操作 DOM 所帶來(lái)的性能消耗是很大的，而 React 之所以快，是因?yàn)樗恢苯硬僮?DOM，而是引進(jìn)虛擬 DOM 的實(shí)現(xiàn)來(lái)解決這個(gè)問(wèn)題
對(duì)于頁(yè)面的更新，React 通過(guò)自己實(shí)現(xiàn)的 DOM Diff 算法來(lái)進(jìn)行差異對(duì)比、差異更新，反映到頁(yè)面上就是只重繪了更新的部分，從而提高渲染效率。
備注：以下性能闡述參考自尤雨溪。
對(duì)于 React 的性能方面，想啰嗦幾句：
1. React 從來(lái)沒(méi)有說(shuō)過(guò) “React 比原生操作 DOM 快”。React 的基本思維模式是每次有變動(dòng)就整個(gè)重新渲染整個(gè)應(yīng)用。如果沒(méi)有 Virtual DOM，簡(jiǎn)單來(lái)講就是直接重置 innerHTML。
2. 在比較性能的時(shí)候，要分清楚初始渲染、小量數(shù)據(jù)更新、大量數(shù)據(jù)更新這些不同的場(chǎng)合。
3. 不要天真地以為 Virtual DOM 就是快，diff 不是免費(fèi)的，Virtual DOM 真正的價(jià)值從來(lái)都不是性能，而是它
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線(xiàn)安全]玩轉(zhuǎn)無(wú)線(xià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
- 從棧不平衡問(wèn)題 理解 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)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式