今天的 Web 應用程序除了外觀比過去更好看以外，更多IT技術乾貨親在微信公眾號鎖定“朗妹兒” 每天都有更新，應用程序的架構和創建方式已經和過去有很大的不同。為突出這點，我們來看看如下的應用：
這是一個簡單的商品目錄瀏覽應用程序，它和這種類型的其它應用程序一樣，通常包含一個主頁、一個搜索結果頁、一個詳情頁等等。
老式的多頁設計
如果你幾年前做過這種應用程序，可能會採用包含多個單頁面的方式。頁面流可能會像下面這樣：
在多頁設計方式下，對於大多數改變頁面顯示的行為，Web 應用會導航到一個完全不同的頁面。用戶會看到原頁面被銷燬，然後出來一個新頁面，這種用戶體驗很不盡人意。這對如何維護應用程序的狀態有很大影響。除了通過 cookie 和一些服務端機制來保存用戶數據外，基本上就不用管別的了。生活是美好的。
新派的單頁應用
今天，需要在單個頁面之間導航的 Web 應用模式似乎過時了...可能，真的過時了：
現代的應用程序趨向於採用一種稱為單頁應用（SPA）的模式。這種模式下，我們不需要導航到不同的頁面，甚至不需要重新加載一個頁面。應用的不同視圖被加載和卸載到同一頁面上。
在單頁應用模式下，上面的應用看起來應該是下面這樣子：
當用戶與應用程序交互時，我們用匹配用戶行為的數據和 HTML 替換紅色虛線區域的內容，從而帶來更流式的體驗。我們甚至可以用很多視覺技術讓新內容很好地過渡，而這種很酷的技術以前只在移動設備或者桌面應用中才有。這類效果在多個頁面中導航時幾乎是不可能的。
如果以前你沒有聽說過單頁應用，這一切聽起來就有點不可理喻。但是你很可能不知不覺遇到過一些單頁應用。如果曾經用過 Gmail、Facebook、Instagram、Twitter 等流行 Web 應用，那麼你實際上就是在用單頁應用。在所有這些應用中，內容是動態顯示的，不需要刷新或者導航到不同的頁面。
講了這麼多，搞得好像這些單頁應用很複雜一樣。事實上並非完全如此。現在 JavaScript 以及大量第三方框架和庫都已經有了很大提升，創建單頁應用從沒有像現在這樣簡單過。但是，這並不意味著沒有提升的空間。
在創建單頁應用時，有時我們會遇到三個主要的問題：
1. 在單頁應用中，我們的大部分時間會花在保持數據與 UI 同步上。例如，如果用戶加載新的內容，我們要顯式 清除搜索字段嗎？是否讓一個導航元素上的活動標籤依然可見？哪個元素要在頁面上保留，哪個應該銷燬？
這些都是單頁應用獨有的問題。而在老式多頁應用模式中，這從來就不是問題，因為在多頁應用模式下在頁面之間導航時，UI 中的一切都會被銷燬，然後又重建起來。
2. DOM 操作很慢很慢 。手動查詢元素、添加子節點、刪除子樹、執行其它 DOM 操作，這些都是在瀏覽器中所做的最慢的事情。然而，不幸的是，在單頁應用中，我們要做很多這種事情。要響應用戶行為以及顯示新內容，就不得不操作 DOM。
3. 處理 HTML 模板會很痛苦。在單頁應用中導航，實際上就是處理 HTML 文檔片段。這些 HTML 文檔片段用來表示要顯示的內容，經常被稱為模板。要處理模板，將內容在同一頁面中顯示出來，我們就得用 JavaScript 來操作模板，用數據來填充模板，這樣代碼很快變得很複雜。
更糟糕是，對於不同的框架，其模板的語法以及與數據交互的方式有很大不同。例如，如下是 Mustache 中的模板示例：
1. var view = {
2. title: "Joe",
3. calc: function () {
4. return 2 + 4;
5. }
6. };
7.
8. var output = Mustache.render("{{title}} spends {{calc}}", view);
actionscript
有時，你的模板可能看起來有點像乾淨的 HTML，你可以自豪地在同學面前炫耀。有時，你的模板可能是難以理解的，充滿了設計用來幫助將 HTML 元素映射到某些數據的自定義標籤。
儘管有這些缺點，單頁應用程序並不是到處都是。單頁應用只是目前的一部分，並且會徹底地構成未來web 應用創建的方式。這並不意味著我們不得不容忍這些缺點。為解決這。。。。
迎接 React
Facebook (和 Instagram) 覺得該解決這些問題了。在經歷了足夠的單頁應用實踐後，他們發佈了一個叫做 React 的庫。React 不僅解決了這些缺點，還改變了我們創建單頁應用的思考方式。
在下面的小節中，我們來看看 React 帶來的一些大事。
自動化的 UI 狀態管理
在單頁應用中，跟蹤 UI 並維護狀態是很難，而且很耗時間。而在 React 中，你只需要關注一件事情：UI 所處的最終狀態。它不關心 UI 開始是什麼狀態，也不關心用戶改變 UI 會採取哪些步驟，只需要要關心 UI 結束的狀態：
React 負責管理一切。它搞清楚要發生什麼，才能確保 UI 被正確表示。所以，所有狀態管理的事情不再需要我們操心。
快速的 DOM 操作
因為 DOM 操作是真的很慢，所以我們永遠不會直接用 React 修改 DOM，而是修改內存中的虛擬 DOM：
操作虛擬 DOM 非常快，當時機合適時，React 負責更新真實 DOM。它通過比較虛擬 DOM 和真實 DOM 之間的差別，查明哪個改變很重要，然後在一個稱為 Reconciliation 的過程中作出最少量的 DOM 改變，以確保一切保持最新。
譯者注：簡單說， React在每次需要渲染時，會先比較當前DOM內容和待渲染內容的差異，然後再決定如何最優地更新DOM。這個過程被稱為 reconciliation。
用來創建真正可組合 UI 的 API
React 鼓勵我們將視覺元素分為更小的組件，而不是一整大塊：
編程領域中，模塊化、簡潔、自包含是好的理念。React 把這些理念帶到用戶界面中。很多 React 的核心 API 圍繞著更容易創建更小的界面組件，這些界面組件隨後可以與其它界面組件組合，創建更大更復雜的界面組件，就像俄羅斯套娃一樣:
這是 React 簡化（以及改變）創建 Web 應用界面的主要方式之一。
完全在 JavaScript 中定義 UI
雖然這聽起來有點不可理喻，（我們知道，在 Web 標準年代，崇尚的是結構、表現形式和行為分離，也就是 UI 的結構、表現形式和行為部分分別分離到 HTML、CSS 和 JavaScript 三個文件中。完全在 JavaScript 中定義 UI，豈不是跟 Web 標準背道而馳麼？）。但是且聽我說完。如果像過去一樣採用 HTML 模板的方式定義 UI，除了古怪的語法外，還有另一個主要問題。在模板中，除了只是顯示數據，我們被限制做很多事情。例如，如果你想根據特定條件，選擇顯示哪一塊 UI，就不得不在應用中到處寫 JavaScript，或者用一些古怪的框架特有的模板語法，才能讓它起作用。
例如，如下是 EmberJS 模板中條件語句的樣子：
1. {{#if person}}
2. Welcome back, {{person.firstName}} {{person.lastName}}!
3. {{else}}
4. Please log in.
5. {{/if}}
handlebars
而 React 實現的方式就很優雅。UI 完全在 JavaScript 中定義，我們可以利用 JavaScript 提供的強大功能在模板內做各種事情。我們受到的限制只是 JavaScript 支持不支持，而不是模板框架的限制。
現在，當我們思考完全用 JavaScript 定義 UI 時，可能會想到有些可怕的事情，比如引號、轉義符、大量 createElement 調用等。不要擔心。React 允許我們（可選）用 類似 HTML 的語法，即 JSX， 來定義 UI，而 JSX 是 JavaScript 完全支持的。我們可以像下面這樣用 JSX 指定標記，而不是編寫代碼定義 UI：
1. ReactDOM.render(
2.
3.
Batman
4.
Iron Man
5.
Nicolas Cage
6.
Mega Man
7.
8. destination
9. );
javascript
這段代碼用 JavaScript 寫看起來是這樣的：
1. ReactDOM.render(React.createElement(
2. "div",
3. null,
4. React.createElement(
5. "h1",
6. null,
7. "Batman"
8. ),
9. React.createElement(
10. "h1",
11. null,
12. "Iron Man"
13. ),
14. React.createElement(
15. "h1",
16. null,
17. "Nicolas Cage"
18. ),
19. React.createElement(
20. "h1",
21. null,
22. "Mega Man"
23. )
actionscript
呀！通過使用 JSX，你就能使用很熟悉的 HTML 語法很輕鬆地定義 UI，同時依然擁有 JavaScript 的強大功能和靈活性。更佳的是，在 React 中，界面和 JavaScript 通常在一個地方。我們不再需要在定義一個界面組件的外觀和行為的多個文件之間跳轉了。This is templating done right.
只是 MVC 架構中的 V
到這裡就快完了！React 並非一個完整的框架，它主要作用於視圖層，所有它關心的問題圍繞著界面元素，並且讓界面元素保持最新。這意味著不管項目中所用的 MVC 架構中的 M 和 C 部分是什麼，我們都可以自由用 React 作為 V 部分。這種靈活性讓我們可以挑選熟悉的技術，並且讓 React 不僅可以用來新創建 Web 應用，還可以用它來修改已有的應用，而不需要刪除或者重構整個代碼。
總結
就新的 Web 框架和庫而言，React 是相當成功。它不僅解決了開發者在創建單頁應用程序時面臨的常見問題，而且還加入了一些額外的技巧，讓創建單頁應用的界面變得相當相當簡單。因為它是從 2013 年開始出現，所以 React 在很多流行網站和 app 中得到應用。除了 Facebook 和 Instagram 外，還包括 BBC、可汗學院、PayPal、Reddit、紐約時報、Yahoo 等等。
本文介紹 React 可以做什麼以及為什麼它可以這樣做。在後面的教程中，我們將深入講解本文中看到的所有東西，並且會涵蓋可以幫助我們在項目中使用 React 的技術細節。
閱讀更多 全階魔方 的文章
