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

作者：核子可樂譯 2015-12-31 10:14:54

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

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

[[160997]]

關于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方案拆分為多個簡單組件。接下來的任務是弄清應用程序運行需要具備哪些數據，這些數據將處于何種位置且如何與應用進行共享。當這些問題得到解決，大家將能夠獲得可進行試用體驗的已創建應用。

原文標題：Develop Robust Web Apps with React.js

【51CTO.com獨家譯稿，合作站點轉載請注明來源。】

責任編輯：王雪燕來源： 51CTO

React.js 開發 Web應用