React 背景知識(shí)
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，但可以使用 React 作為 MVC 架構(gòu)的 View 層輕易的在已有項(xiàng)目中使用，它是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，起源于 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站，于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開始關(guān)注和使用它。
以前沒(méi)有 ajax 技術(shù)的時(shí)候，web 頁(yè)面從服務(wù)端整體渲染出 html 輸出到瀏覽器端進(jìn)行渲染，同樣的，用戶的一個(gè)改變頁(yè)面的操作也會(huì)刷新整個(gè)頁(yè)面來(lái)完成。直到有了 ajax 出現(xiàn)，實(shí)現(xiàn)頁(yè)面局部刷新，帶來(lái)的高效和分離讓 web 開發(fā)者們驚嘆不已。但隨之而來(lái)的問(wèn)題是，復(fù)雜的用戶交互及展現(xiàn)需要通過(guò)大量的 DOM 操作來(lái)完成，這讓頁(yè)面的性能以及開發(fā)的效率又出現(xiàn)了新的瓶頸。
時(shí)至今日，談到前端性能優(yōu)化，減少 DOM 元素、減少 reflow 和 repaint、編碼過(guò)程中盡量減少 DOM 的查詢等手段是大家耳熟能詳?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)都不是性能，而是它
