今日，各種豐富精巧的網絡應用層出不窮，甚至把各種功能和界面異常複雜的桌面應用都套到了了Web里，像微軟現金奶牛的Office套件，是多麼複雜的一種桌面應用程序，它的代碼量量跟windows操作系統幾乎不不相上下，這種龐然大物居然能裝到Web裏里面，可見近幾年來Web技術的發展可謂突飛猛進。
如果沒有像React 這種強大的技術框架支持，要開發這種網頁應用根本就
是不不可想象的。
我們看看以前老式的多頁應用是怎樣的，以前的應用本質上是一堆簡單頁面的機械組合，開始有一個主頁面，你點擊鏈接，然後瀏覽器再把其他頁面加載展示。這種網頁應用的用戶體驗很差，加載新頁面的時候，瀏覽器需要跟服務器器交互，我們作爲用戶往往要無奈的看着界面變成一片空白，等瀏覽器費盡九牛二虎之力把新頁面拉下來後，老半天才像擠牛奶一樣，一點一滴的把新頁面慢慢顯示處理。
基於這種方式，你要想開發一個網頁版office，簡直是異想天開，這就好像你想開一輛古董老老車在F1方程式賽道上跟舒馬赫爭冠軍。如果你想開這種車追女生的話，那你很快能體會到有句句詩叫”寂寞空庭春欲晚“，它所表達的悲涼意境了。
2， 單頁模型（SPA）
現代網頁App的開發，都基於單頁模型。也就是當你需要瀏覽不同頁面時，不需要不停的向服務器請求然後加載新頁面。而是把不同的頁面視圖展示在單一個頁面中。
它的基本原理理是，要展示新頁面時，客戶端不再向服務器器頻繁請求，而是把新頁面的數據拉取下來，然後客戶端根據具體情況，在本地制新的界面，然後把信息在新繪製的界面中展現出來。
這樣一來，就減少了客戶端與服務器的交互延遲，同時利用 本地的計算能力，客戶端能繪製更加精美的界面，同時提供更及時 的響應，因此用戶體驗便可以大大增強。
當下最火熱最強大的網頁應用，都是基於單頁模型的，例如google 的GMail, FaceBook, Instagram, 還有微博，twitter等。
3. 單頁應用的困境
1， 單頁應用難點之一是如何保持界面與數據同步變換。例如用戶 點擊“搜索”按鈕後，拿到搜索結果，界面如何快速的轉變爲列表顯示的方式？如何決定哪個控件該留在界面上，哪個控件該隱藏起來？拿到不同的數據，UI需要根據數據做相應變動，而這種變動需要快速而且高效。
2， 如何高效的操作DOM模型。做過web開發的同學都知道，瀏覽器在其內部，根據html頁面，構建了一種樹狀結構叫DOM.要想改變頁面顯示，就得對dom模型進行修改，瀏覽器一旦察覺到dom改變了， 它會解讀改變後的dom, 然後根據dom的變化重新繪製界面。但問題在於，這個過程是及其低效的
3， html頁面代碼過於複雜。DOM其實是一種中間語言，它是對html 頁面的解析，但html模板是一種非常複雜的邏輯結構，開發人員 必須非常熟練的掌握html代碼的編寫，同時還得深諳javascript的 開發技術，並且還得很好的融合兩者，才能開發出高效強大的頁面 應用，但這種要求是一種極高的門檻，對初學者來說，學習曲線過於陡峭，同時過高的複雜性大大限制了應用的開發，要想開發出 強大的網頁應用，無論是設計上的難度，邏輯上的錯綜複雜，還是 工程量上的龐大，這些都是阻礙Web開發的重重障礙。
React 救駕來遲
我記得以前最喜歡看的武打片有這麼一句：臣救駕來遲，請皇上贖罪。我也想跟大家說一聲，臣攜React救駕來遲,請諸位皇上謝罪。 React 的誕生就是要解決我們前面提到的種種困難的。
自動化的UI管理對於單頁App 而言，自動化的UI管理，也就是讓界面狀態跟顯示數據的變化保持同步，是一件很困難的事情。但在React框架下，它在 數據和界面間，構造了一個粘合層，把數據的變化轉成一系列事件，開發者只需要根據事件轉換界面狀態，這就大大緩解了數據和界面間的邏輯耦合度，極大的降低了兩者維持狀態一致性的技術難度。
更快的DOM操作
由於DOM操作的效率及其低下，React 爲了提升效率，在內存中， 構建了一顆虛擬DOM, 由於虛擬DOM在內存中，對虛擬DOM的操作， 速度都會很快，React會把對虛擬DOM的操作全部緩存起來，在合適的時間，React 會把所將虛擬DOM與瀏覽器內部的DOM模型進行比較，找出變更的部分，然後一次性把變更的部分提交到瀏覽器的DOM 中，因此在React框架下，DOM的操作會變得無比高效。
UI的組件化設計 React 之所以有利於開發Web應用界面就在於，它將依賴組件化， 組合化，模塊化的方式來簡化複雜UI界面的設計難度。React提供 不少API，幫助構造小且可重用的UI組件，然後再提供機制 ，讓我們把這些組件結合起來，形成形成複雜且功能強大的大組件 。這就很像圖中的俄羅斯套娃，小的可以放入中的，中的又可以放入大的，這些套娃可以相互組合，同時每一個套娃又是獨立的主體。
依賴純JS開發web界面
瞭解web開發的同學或許都知道，網頁界面的設計，必須由CSS來 定製。同時，如果你想實現某些特別的頁面動態特效的話，你必須 編寫邏輯複雜的js代碼來對DOM進行操作。React 一大創新就是， 它完全擺脫了CSS的影響，讓開發者直接使用js來定製界面。同時React 提供了一種非常簡潔的界面定義方式叫JSX, jSX實際上 是一種語法結構，就如同大家在圖片裏里看到的<div></div>標籤 塊，它看起來像是html語法模塊，但實質上不是，React 把JSX 的標籤模塊解讀成一系列DOM操作，大家可以看看，本例中的JSX 標籤模塊，React 框架解讀後，把它轉換成一系列createElement 操作，於是JSX不但簡化了UI設計的邏輯表述方式，同時也極大的減輕了開發者的編碼負擔，從而降低了了Web界面的設計難度，並提高了 界面的開發效率。
React 是MVC 中的V React 並不不像Angular一樣，是一種完整的全面的框架，React將精力集中在處理視圖層上。它的特徵是將數據和UI進行結合，這意味着，在使用React框架時，我們有足夠的自由度去選擇其他可以處理數據層和控制層的框架。
總的來說，React框架使得開發單頁App時，降低了數據和界面整合 的難度，對利用web技術開發複雜應用方面提供了巨大的推進作用。