React總結(jié)篇之四_模塊化React和Redux應(yīng)用

創(chuàng)建一個(gè)復(fù)雜一點(diǎn)的應(yīng)用應(yīng)該如何做：

作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。

• 模塊化應(yīng)用的要點(diǎn)
• 代碼文件的組織方式
• 狀態(tài)數(shù)的設(shè)計(jì)
• 開發(fā)輔助工具

一、模塊化應(yīng)用的要點(diǎn)
1.構(gòu)建一個(gè)應(yīng)用的基礎(chǔ)要做如下3件事情：

• 代碼文件的組織結(jié)構(gòu)
• 確定模塊的邊界
• store的狀態(tài)樹設(shè)計(jì)

2. 代碼文件的組織方式：
   按功能組織
   Redux應(yīng)用適用于按功能組織劃分，即把完成同一應(yīng)用功能的代碼放在一個(gè)目錄下，一個(gè)應(yīng)用功能包含多個(gè)角色的代碼。在Redux中，不同的角色就是reducer、actions和視圖，而應(yīng)用功能對(duì)應(yīng)的就是用戶界面上的交互模塊。
   拿Todo應(yīng)用為例子，這個(gè)應(yīng)用的兩個(gè)基本功能就是TodoList和Filter，所以代碼就這樣組織，文件目錄列表如下：
   
   每個(gè)基本功能對(duì)應(yīng)的其實(shí)就是一個(gè)功能模塊，每個(gè)功能模塊對(duì)應(yīng)一個(gè)目錄，每個(gè)目錄下包含同樣名字的角色文件。

   • actionTypes.js定義action類型；
   • actions.js定義action構(gòu)造函數(shù)，決定了這個(gè)功能模塊可以接受的動(dòng)作；
   • reducer.js定義這個(gè)功能模塊如何響應(yīng)actions.js中定義的動(dòng)作；
   • views目錄，包含這個(gè)功能模塊中所有的React組件，包括傻瓜組件和容器組件；
   • index.js這個(gè)文件把所有的角色導(dǎo)入，然后統(tǒng)一導(dǎo)出
     在這種組織方式下，當(dāng)你要修改某個(gè)功能模塊的代碼的時(shí)候，只要關(guān)注對(duì)應(yīng)的目錄就行了，所有需要修改的代碼文件都能在這個(gè)目錄下找到。
3. 模塊接口
   每個(gè)功能模塊下都有一個(gè)index.js文件，這個(gè)文件就是我們的模塊接口。
   舉例如下：
   import * as actions from './actions.js'
   import reducer from './reducer.js'
   import view from './views/container.js'
   export {actions,reducer,view}
   如果filter中的組件想要使用todoList中的功能，應(yīng)該導(dǎo)入todoList這個(gè)目錄。因?yàn)閷?dǎo)入這個(gè)目錄的時(shí)候，默認(rèn)導(dǎo)入的就是這個(gè)目錄下的index.js文件，就是這個(gè)模塊想要公開出來(lái)的接口。

4.狀態(tài)樹的設(shè)計(jì)
狀態(tài)樹的設(shè)計(jì)建議遵循以下幾個(gè)原則：

• 一個(gè)模塊控制一個(gè)狀態(tài)節(jié)點(diǎn)
• 避免冗余數(shù)據(jù)
• 樹形結(jié)構(gòu)扁平

4.1 一個(gè)狀態(tài)節(jié)點(diǎn)只屬于一個(gè)模塊
在Redux應(yīng)用中，store上的每一個(gè)state都只能通過(guò)reducer來(lái)更改，而我們每個(gè)模塊都有機(jī)會(huì)導(dǎo)出一個(gè)自己的reducer，這個(gè)導(dǎo)出的reducer只能最多更改Redux的狀態(tài)樹上一個(gè)節(jié)點(diǎn)下的數(shù)據(jù)，因?yàn)閞educer之間對(duì)狀態(tài)樹上的修改權(quán)是互斥的，不能讓兩個(gè)reducer都可以修改同一個(gè)狀態(tài)樹上的節(jié)點(diǎn)。比如，如果A模塊的reducer負(fù)責(zé)修改狀態(tài)樹a字段下的數(shù)據(jù)，那么另一個(gè)模塊B的reducer就不可能有機(jī)會(huì)修改a字段下的數(shù)據(jù)。這里指的是‘修改權(quán)’，不是‘讀取權(quán)’（讀取權(quán)對(duì)任何模塊都是開放的）。

4.2 避免冗余數(shù)據(jù)
在Redux的Store中，一定要避免數(shù)據(jù)的冗余，因?yàn)檫@可能會(huì)導(dǎo)致數(shù)據(jù)不一致的問(wèn)題。

4.3 樹形結(jié)構(gòu)扁平
在設(shè)計(jì)Redux Store的狀態(tài)樹時(shí)，要盡量保持樹形結(jié)構(gòu)的扁平（樹形結(jié)構(gòu)不要深）。

4.4 不使用ref

4.5 開發(fā)輔助工具

網(wǎng)站標(biāo)題：React總結(jié)篇之四_模塊化React和Redux應(yīng)用
轉(zhuǎn)載注明：http://bm7419.com/article2/psdhic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)