歡迎關(guān)注：https://zhuanlan.zhihu.com/dreawer
前言
說起React，那也是近一年多時間火起來的前端框架憔购，其在Facebook的影響力和大力推廣下痪蝇，已然成為目前前端界的中流砥柱劝萤。在如今的前端框架界肋殴，React尖殃、Vue攘宙、Angular三分天下的時代已經(jīng)到來屯耸，而曾經(jīng)jQuery一統(tǒng)天下的局面已一去不復(fù)返。
三分天下蹭劈，前端雖亂疗绣，但美其名曰“繁榮”。每一次突破性的革命必定會迎來成千上萬的追隨者铺韧，我們可以看一下一份來自NPM的統(tǒng)計(jì)數(shù)據(jù)：
上圖統(tǒng)計(jì)的是全球范圍內(nèi)React多矮、Vue、Angular在npm中的月下載次數(shù)哈打，統(tǒng)計(jì)地址可以訪問：npm-stat工窍。從圖中我們不難發(fā)現(xiàn)React雖初出茅廬，但其影響力已經(jīng)奠定了在前端框架中的霸主地位前酿。
而對于React的開發(fā)者來說患雏，如何利用React構(gòu)建現(xiàn)代化的前端項(xiàng)目，產(chǎn)出高質(zhì)量的前端代碼才是學(xué)習(xí)React的重點(diǎn)罢维。所以本文就我自己平時利用React開發(fā)項(xiàng)目的經(jīng)驗(yàn)和個人見解淹仑，來談?wù)勗赗eact項(xiàng)目中需要了解和容易忽略的“小事”。
那些小事
俗話說“千里之堤毀于蟻穴”肺孵，在React開發(fā)中我們不能忙于進(jìn)度而忽視了細(xì)節(jié)匀借。
1.使用容器組件與展示組件
容器組件和展示組件名詞來自于redux文檔。如果你想讓自己的React項(xiàng)目變得清晰可維護(hù)平窘，那么你需要了解并使用它們吓肋。
這里我們將組件分成兩類，一類叫“容器組件”瑰艘，我一般將它們放在containers文件夾下是鬼。這一類組件可以理解為最頂層的組件肤舞，其功能僅僅做數(shù)據(jù)提取，然后渲染對應(yīng)的子組件均蜜。
另一類叫“展示組件”李剖，我一般將它們放在components文件夾下。這一類組件可以理解為只具有展示性的子組件囤耳，其功能僅僅是展示性的篙顺，所有數(shù)據(jù)都通過 props 傳入。
這樣分類的好處在于：關(guān)注分離充择，更易復(fù)用及維護(hù)德玫，數(shù)據(jù)集中處理等。具體可以參見：譯文《容器組件和展示組件》
2.組件劃分不宜過細(xì)椎麦，層次不宜過深
曾經(jīng)有人問我React組件的劃分應(yīng)不應(yīng)該太細(xì)宰僧，比如是不是可以把一個輸入框劃分為一個組件？
我個人認(rèn)為組件不應(yīng)該按照DOM元素來劃分铃剔，而是應(yīng)該按照功能來劃分撒桨。如果你的一個頁面中包含了兩個功能，比如表格搜索键兜、彈框查看凤类，就可以將其劃分為兩個子組件。
同樣的組件層次也不宜過深普气。很多時候會存在組件中包含組件的情況谜疤，這樣就出現(xiàn)了組件之間的嵌套層次。我個人認(rèn)為組件間的嵌套層次不宜超過3層现诀，如果嵌套層次太深會直接導(dǎo)致功能及狀態(tài)的難以維護(hù)屿聋，就像if else語句嵌套太深一樣党晋。
3.Redux和state并不沖突
很多開發(fā)者可能會認(rèn)為用了Redux來管理數(shù)據(jù)狀態(tài)后，我們的組件中就不需要state了。其實(shí)我個人認(rèn)為Redux和state并不沖突砌溺。
Redux主要用于管理那些公用及異步的狀態(tài)缸夹，而state一般用于管理組件獨(dú)有的狀態(tài)铆遭。如果你的組件中存在其不必和其他組件公用及非異步的單一數(shù)據(jù)锐极，那么你直接可以寫在state中，比如一些loading的狀態(tài)和顯示隱藏的狀態(tài)等成福。
巧妙的使用Redux和state可以幫助我們更好的管理數(shù)據(jù)流碾局。
4.不要渲染當(dāng)前用不到的組件
在用戶操作中，有些組件可能不是一開始展示頁面的時候就需要用到的奴艾，比如某些彈框等净当。這樣的組件除了將其隱藏外，我們最好不要讓它渲染在頁面上，當(dāng)用戶點(diǎn)擊觸發(fā)的時候再進(jìn)行渲染像啼，這樣一來便起到了優(yōu)化加載的作用俘闯。
5.除了劃分組件還應(yīng)劃分reducer
相比組件的劃分，reducer的劃分也同樣重要埋合。隨著應(yīng)用的膨脹备徐，我們可以將拆分后的 reducer 放到不同的文件中, 以保持其獨(dú)立性并用于專門處理不同的數(shù)據(jù)域萄传。
如果一個中大型的項(xiàng)目不劃分reducer甚颂，會導(dǎo)致單一的reducer文件代碼過于冗長而難以維護(hù)。我們可以使用Redux提供的 combineReducers()來將拆分的reducer進(jìn)行合并秀菱。詳見：Redux中文文檔振诬。
結(jié)語
事無巨細(xì)，人無完人衍菱。一個優(yōu)秀的React項(xiàng)目并不代表其沒有缺點(diǎn)赶么，代碼優(yōu)化是一個長期的過程，唯有發(fā)現(xiàn)問題總結(jié)問題才能給我們帶來新的突破口脊串。
來源：前端呼啦圈（Love-FED）
本文完辫呻！
