如何利用React.js開(kāi)發(fā)出強(qiáng)大Web應(yīng)用
譯文在開(kāi)發(fā)強(qiáng)大的Web應(yīng)用程序領(lǐng)域，React.js無(wú)疑可算當(dāng)之無(wú)愧的贏家。首先，最令人振奮的就是它為開(kāi)發(fā)人員帶來(lái)了多年以來(lái)在Web開(kāi)發(fā)框架當(dāng)中始終無(wú)法找到的各類要素。很多Web開(kāi)發(fā)人員之所以對(duì)其青眼有加，正是因?yàn)樗軌驇椭覀冮_(kāi)發(fā)出不同于以往且***交互特性的Web應(yīng)用。它幾乎無(wú)所不包，因此我們也應(yīng)當(dāng)對(duì)其加以關(guān)注，但利用它在未來(lái)的開(kāi)發(fā)工作當(dāng)中打造出更為出色的成果。
關(guān)于React.js，首先需要留意的就是它在默認(rèn)情況下允許大家保證動(dòng)態(tài)站點(diǎn)能夠始終擁有強(qiáng)大的穩(wěn)定性，這意味著我們能夠充分運(yùn)用各類靈活的交互設(shè)計(jì)效果而不必?fù)?dān)心給站點(diǎn)運(yùn)行帶來(lái)影響。這絕對(duì)是一項(xiàng)偉大的壯舉，事實(shí)上我們甚至很難在利用React.js進(jìn)行應(yīng)用程序開(kāi)發(fā)時(shí)造成任何故障。
在利用React.js開(kāi)發(fā)強(qiáng)大Web應(yīng)用時(shí)，另外還有幾項(xiàng)提示必須加以強(qiáng)調(diào)——這些提示絕對(duì)值得一試而且***實(shí)用性，特別是對(duì)于那些剛剛上手這套框架的朋友來(lái)說(shuō)。它們將幫助大家更好地處理未來(lái)開(kāi)發(fā)工作中可能面對(duì)的各種問(wèn)題。再有，大家還能夠以遠(yuǎn)超想象的速度實(shí)現(xiàn)應(yīng)用開(kāi)發(fā)。
原型設(shè)計(jì)
如果大家打算利用React.js創(chuàng)建一款應(yīng)用程序，那么各位無(wú)需完成整套工具設(shè)置即可在自己的瀏覽器當(dāng)中輕松便捷地搞定原型設(shè)計(jì)。是的，其實(shí)際操作過(guò)程與我們的表述同樣簡(jiǎn)單。舉例來(lái)說(shuō)，如果大家決定利用可選JSX語(yǔ)法自行編寫(xiě)組件，其編寫(xiě)方式以及代碼內(nèi)容看起來(lái)幾乎與HTML如出一轍。
作為開(kāi)發(fā)***步，我們首先需要制作一份簡(jiǎn)單的文檔，其中同時(shí)包含React.js與JSX轉(zhuǎn)換工具。以下列代碼作為范例：
- <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>
組件結(jié)構(gòu)
React.js當(dāng)中的應(yīng)用程序必須通過(guò)已經(jīng)在層級(jí)結(jié)構(gòu)當(dāng)中布置完成的組件加以構(gòu)成。如果大家希望在開(kāi)發(fā)工作當(dāng)中輕松使用應(yīng)用程序的每個(gè)組成部分，那么必須首先拿出時(shí)間弄清楚其在層級(jí)結(jié)構(gòu)中的具體作用并以此為基礎(chǔ)勾勒應(yīng)用原型。這意味著，每個(gè)組件都負(fù)責(zé)解決一項(xiàng)特定任務(wù)。而在某些復(fù)雜組件當(dāng)中，我們還需要將其拆分成數(shù)個(gè)簡(jiǎn)單組件，從而確保一次只解決一個(gè)問(wèn)題。這也是我們充分發(fā)揮React.js強(qiáng)大能力的必要前提。
屬性與狀態(tài)
React.js當(dāng)中的數(shù)據(jù)主要分為兩種類型：
·屬性：這類數(shù)據(jù)會(huì)在不同組件之間往來(lái)傳遞
·狀態(tài)：這類數(shù)據(jù)會(huì)始終被保存在某組件當(dāng)中
組件的屬性（即往來(lái)于不同組件間的信息）不可修改與變更，但組件的狀態(tài)卻能夠隨時(shí)加以調(diào)整（即組件內(nèi)部的信息）。這代表著React.js中的一切都具備與之對(duì)應(yīng)的真實(shí)源。
因此，當(dāng)我們利用React.js創(chuàng)建一款應(yīng)用程序時(shí)，必須要在Web應(yīng)用開(kāi)發(fā)中做出一項(xiàng)決策——各組件擁有怎樣的數(shù)據(jù)，這些數(shù)據(jù)的主來(lái)源又是什么。一旦解決了這個(gè)問(wèn)題，大家就能夠輕松完成應(yīng)用創(chuàng)建的其它工作。
在這種情況下，我們只需要考量三種數(shù)據(jù)類型：
- 網(wǎng)絡(luò)數(shù)據(jù)
- 用戶輸入數(shù)據(jù)
- 預(yù)測(cè)數(shù)據(jù)
具體來(lái)參考以下示意圖：
其中網(wǎng)絡(luò)數(shù)據(jù)將由網(wǎng)絡(luò)及線路組件所獲取。其通常代表著大量數(shù)據(jù)，而且為了不影響應(yīng)用的運(yùn)行速度，大家需要在外部對(duì)其加以處理，而后再把結(jié)果交付至我們創(chuàng)建的應(yīng)用。
組件通信機(jī)制
在這里，數(shù)據(jù)被設(shè)計(jì)為自上而下貫穿整個(gè)組件結(jié)構(gòu)，但大家有時(shí)候也需要以自下而上的方式逆向交付數(shù)據(jù)以實(shí)現(xiàn)應(yīng)用程序交互性。在這種情況下，我們就需要利用特定的技術(shù)手段實(shí)現(xiàn)這種“數(shù)據(jù)逆流”。下面來(lái)看幾種實(shí)現(xiàn)此類目標(biāo)的方式：
·大家可以選擇使用回調(diào)屬性的方式，這是最理想也最簡(jiǎn)單的解決方案，因?yàn)榇藭r(shí)組件只需要同其直接上游對(duì)象進(jìn)行數(shù)據(jù)共享。React.js能夠自動(dòng)對(duì)每個(gè)實(shí)例者組件方法綁定，因此維護(hù)工作不會(huì)占用我們大量精力。下面來(lái)看具體示例：
- return ;
- }
- });
- var Child = React.createClass({
- render: function() {
- return Click me;
- }
- });
·如果大家希望實(shí)現(xiàn)的是其它抵達(dá)通知機(jī)制，那么可以利用單一系統(tǒng)實(shí)現(xiàn)發(fā)布/訂閱。這種方式非常靈活而且同樣易于維護(hù)。只需使用PubSubJS這類庫(kù)，大家就能夠隨意對(duì)某一組件的生命周期方法進(jìn)行綁定與解綁。
相關(guān)代碼示例如下：
- 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;
- }
- });
組件生命周期
組件永遠(yuǎn)擁有著與其API緊密關(guān)聯(lián)的生命周期。在這種情況下，其生命周期包括啟動(dòng)、更新與卸載三種狀態(tài)。而這些功能已經(jīng)被內(nèi)置在組件的定義當(dāng)中。舉例來(lái)說(shuō)：
componentWillMount與componentWillUnmount 方法都被用于添加或者移除事件偵聽(tīng)機(jī)制。當(dāng)然還有其它多種方法能夠幫助我們實(shí)現(xiàn)對(duì)組件狀態(tài)及屬性的控制。
一旦我們建立起一套瀏覽器內(nèi)運(yùn)行環(huán)境，接下來(lái)就可以將UI方案拆分為多個(gè)簡(jiǎn)單組件。接下來(lái)的任務(wù)是弄清應(yīng)用程序運(yùn)行需要具備哪些數(shù)據(jù)，這些數(shù)據(jù)將處于何種位置且如何與應(yīng)用進(jìn)行共享。當(dāng)這些問(wèn)題得到解決，大家將能夠獲得可進(jìn)行試用體驗(yàn)的已創(chuàng)建應(yīng)用。
利用React.js，我們能夠非常輕松地開(kāi)發(fā)出強(qiáng)大且穩(wěn)定的Web應(yīng)用程序。這主要是因?yàn)榇蠹倚枰褂玫娜抗δ芏寄軌蛴稍摽蚣茏孕刑峁移湓诔跏荚O(shè)計(jì)之時(shí)就充分考慮到創(chuàng)建高復(fù)雜性應(yīng)用程序的種種需要。
原文標(biāo)題：Develop Robust Web Apps with React.js
【51CTO.com獨(dú)家譯稿 ，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明來(lái)源?！?
