前言

現今在進行網頁應用程式開發的時候，經常使用如asp.net這類便利的模板語言工具。但在重視使用者體驗以及使用者介面設計越來越複雜的現在，這類模板語言的缺點開始顯現，開發者們需要一個能夠用來建立大規模使用者介面的工具。

React便是以這個想法為出發點設計的一個JavaScript Library，來針對MVC設計中的View進行處理。


簡介

React是Facebook所創建的一個開源的JavaScript Library，也被稱為ReactJS或是React.js。主要是用於建立single-page applications的使用者介面，並有助於開發人員建置需要經常做資料交換的大型應用程式，如Facebook、Instagram、Airbnb等等。近來有許多人考慮使用React來處理MVC架構中View的部分。

為了達到這個需求，React採取了兩個主要的核心概念：

單純性(Simple)
於任意時間點，應用程式都應該傳達相同資訊，且於後端資料改變時React會自動控管全部UI的更新。

宣告性(Declarative)
說明了不應該從外部控制元件該如何更新資料，而是於元件內部定義資料來源以及更新方式。當資料發生變更的時候，概念上就像是React去觸發了refresh按鈕，接著元件會自己知道只變更有更新的部分。

特色

Virtual DOM：加快執行速度
由於直接操作DOM是個耗用效能較高的動作，因此React透過Virtual DOM的方式將頁面的架構記錄下來，當資料發生變動的時候，便將Virtual DOM與實際的DOM作比對的動作，並只對有異動的部分進行更動，而加快了呈現的速度。




Component：提高重用性

在DOM結構中的一個節點（node）稱之為元素，而在Virtual DOM機制底下的一個節點即稱為元件。元件的使用對React而言非常重要，因為元件的設計概念是用來計算與Real DOM之間的差異。比起計算整體結構的差異，透過Virtual DOM將使實際執行時間的複雜度大幅下降。
React的核心概念即是建構可以重複使用的元件。簡單來說，透過React你唯一需要做的一件事就是建立各種元件。由於React擁有非常好的封裝性(encapsulation)，其建立的元件也使得程式碼有很高的重用性且易於測試，並使得關注分離(separation of concerns)顯得更加簡單。

簡單範例

用來呈現CommentBox元件並渲染：



執行上面那段語法後呈現的畫面如下：


結論

React就是一個專門處理View的函式庫，它並不處理任何和Model方面有關的設定或改變。一個React的元件就是一個View-Level的概念，而元件的狀態就只是UI方面的狀態。任何類型的資料模型或者L都可以結合到React上操作。

React將元件抽象化的概念在對DOM的更新操作方面非常優異並且準則化，使得高效率的DOM更新機制能直接落實於設計當中。

React元件從 DOM 直接做更新比較不方便。比起自動傳遞View到Model的那類libraries，用React編寫事件處理機制較不便利。

React具有抽象漏洞特性，這是一個本質上的缺陷，不過React有提供避免這類問題發生的方法。在大部分的狀況下，程式只會在Virtual DOM上操作，但在有些狀況下，仍會需要直接對DOM做操作。此時便需要參考使用手冊所提供的相關方法。

參考資料
1. React (JavaScript library)
2. todomvc
3. https://facebook.github.io/react/
4. http://blog.reverberate.org/2014/02/react-demystified.html