如何利用React.js開發出強大Web應用

51CTO發表於2016-01-08
ReactJSWeb

在開發強大的Web應用程式領域，React.js無疑可算當之無愧的贏家。首先，最令人振奮的就是它為開發人員帶來了多年以來在Web開發框架當中始終無法找到的各類要素。很多Web開發人員之所以對其青眼有加，正是因為它能夠幫助我們開發出不同於以往且極具互動特性的Web應用。它幾乎無所不包，因此我們也應當對其加以關注，但利用它在未來的開發工作當中打造出更為出色的成果。

關於React.js，首先需要留意的就是它在預設情況下允許大家保證動態站點能夠始終擁有強大的穩定性，這意味著我們能夠充分運用各類靈活的互動設計效果而不必擔心給站點執行帶來影響。這絕對是一項偉大的壯舉，事實上我們甚至很難在利用React.js進行應用程式開發時造成任何故障。

在利用React.js開發強大Web應用時，另外還有幾項提示必須加以強調——這些提示絕對值得一試而且極具實用性，特別是對於那些剛剛上手這套框架的朋友來說。它們將幫助大家更好地處理未來開發工作中可能面對的各種問題。再有，大家還能夠以遠超想象的速度實現應用開發。

原型設計

如果大家打算利用React.js建立一款應用程式，那麼各位無需完成整套工具設定即可在自己的瀏覽器當中輕鬆便捷地搞定原型設計。是的，其實際操作過程與我們的表述同樣簡單。舉例來說，如果大家決定利用可選JSX語法自行編寫元件，其編寫方式以及程式碼內容看起來幾乎與HTML如出一轍。

作為開發第一步，我們首先需要製作一份簡單的文件，其中同時包含React.js與JSX轉換工具。以下列程式碼作為範例：

<script src="http://fb.me/react-0.13.0.js"></script> 
<script src="http://fb.me/JSXTransformer-0.13.0.js"></script> 
</head> 
<body> 
<script type="text/jsx"> 
/** @jsx React.DOM */ 
</script> 
</body> 
</html>

元件結構

React.js當中的應用程式必須通過已經在層級結構當中佈置完成的元件加以構成。如果大家希望在開發工作當中輕鬆使用應用程式的每個組成部分，那麼必須首先拿出時間弄清楚其在層級結構中的具體作用並以此為基礎勾勒應用原型。這意味著，每個元件都負責解決一項特定任務。而在某些複雜元件當中，我們還需要將其拆分成數個簡單元件，從而確保一次只解決一個問題。這也是我們充分發揮React.js強大能力的必要前提。

屬性與狀態

React.js當中的資料主要分為兩種型別：

屬性：這類資料會在不同元件之間往來傳遞

狀態：這類資料會始終被儲存在某元件當中

元件的屬性（即往來於不同元件間的資訊）不可修改與變更，但元件的狀態卻能夠隨時加以調整（即元件內部的資訊）。這代表著React.js中的一切都具備與之對應的真實源。

因此，當我們利用React.js建立一款應用程式時，必須要在Web應用開發中做出一項決策——各元件擁有怎樣的資料，這些資料的主來源又是什麼。一旦解決了這個問題，大家就能夠輕鬆完成應用建立的其它工作。

在這種情況下，我們只需要考量三種資料型別：

  • 網路資料
  • 使用者輸入資料
  • 預測資料

具體來參考以下示意圖：

其中網路資料將由網路及線路元件所獲取。其通常代表著大量資料，而且為了不影響應用的執行速度，大家需要在外部對其加以處理，而後再把結果交付至我們建立的應用。

元件通訊機制

在這裡，資料被設計為自上而下貫穿整個元件結構，但大家有時候也需要以自下而上的方式逆向交付資料以實現應用程式互動性。在這種情況下，我們就需要利用特定的技術手段實現這種“資料逆流”。下面來看幾種實現此類目標的方式：

大家可以選擇使用回撥屬性的方式，這是最理想也最簡單的解決方案，因為此時元件只需要同其直接上游物件進行資料共享。React.js能夠自動對每個例項者元件方法繫結，因此維護工作不會佔用我們大量精力。下面來看具體示例：

return ; 
} 
}); 

var Child = React.createClass({ 
render: function() { 
return Click me; 
} 
});

如果大家希望實現的是其它抵達通知機制，那麼可以利用單一系統實現釋出/訂閱。這種方式非常靈活而且同樣易於維護。只需使用PubSubJS這類庫，大家就能夠隨意對某一元件的生命週期方法進行繫結與解綁。

相關程式碼示例如下：

var Parent = React.createClass({ 
handleMyEvent: function(e) {...}, 
componentWillMount: function() { 
window.addEventListener("my-event", this.handleMyEvent, false); 
}, 
componentWillUnmount: function() { 
window.removeEventListener("my-event", this.handleMyEvent, false); 
}, 
render: function() {...} 
}); 

var Grandchild = React.createClass({ 
handleClick: function(e) { 
var customEvent = new CustomEvent("my-event",  { 
detail: { ... }, 
bubbles: true 
}); 
React.findDOMNode(this.refs.link).dispatchEvent(customEvent); 
}, 
render: function() { 
return Click me; 
} 
});

元件生命週期

元件永遠擁有著與其API緊密關聯的生命週期。在這種情況下，其生命週期包括啟動、更新與解除安裝三種狀態。而這些功能已經被內建在元件的定義當中。舉例來說：

componentWillMount與componentWillUnmount 方法都被用於新增或者移除事件偵聽機制。當然還有其它多種方法能夠幫助我們實現對元件狀態及屬性的控制。

一旦我們建立起一套瀏覽器內執行環境，接下來就可以將UI方案拆分為多個簡單元件。接下來的任務是弄清應用程式執行需要具備哪些資料，這些資料將處於何種位置且如何與應用進行共享。當這些問題得到解決，大家將能夠獲得可進行試用體驗的已建立應用。

利用React.js，我們能夠非常輕鬆地開發出強大且穩定的Web應用程式。這主要是因為大家需要使用的全部功能都能夠由該框架自行提供，而且其在初始設計之時就充分考慮到建立高複雜性應用程式的種種需要。

相關文章