第212期 / June 5, 2015

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

初探JavaScript React Library

作者/楊子毅

[發表日期:2015/6/5]

前言

現今在進行網頁應用程式開發的時候,經常使用如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作比對的動作,並只對有異動的部分進行更動,而加快了呈現的速度。


《圖一》直接操作DOM


《圖二》透過Virtual DOM操作DOM


Component:提高重用性

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

簡單範例

用來呈現CommentBox元件並渲染:


《圖三》範例code


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

《圖四》呈現畫面


結論

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