談談React那些小事

前言

提及React，那也是近一年多時間火起來的前端框架，其在Facebook的影響力和大力推廣下，已然成爲目前前端界的中流砥柱。在現在的前端框架界，React、Vue、Angular三分天下的時代已經到來，而曾經jQuery一統天下的局面已一去不復返。

三分天下，前端雖亂，但美其名曰「繁榮」。每一次突破性的革命一定會迎來成千上萬的追隨者，咱們能夠看一下一份來自NPM的統計數據：

上圖統計的是全球範圍內React、Vue、Angular在npm中的月下載次數，統計地址能夠訪問：npm-stat。從圖中咱們不難發現React雖初出茅廬，但其影響力已經奠基了在前端框架中的霸主地位。

而對於React的開發者來講，如何利用React構建現代化的前端項目，產出高質量的前端代碼纔是學習React的重點。因此本文就我本身平時利用React開發項目的經驗和我的看法，來談談在React項目中須要瞭解和容易忽略的「小事」。

那些小事

俗話說「千里之堤毀於蟻穴」，在React開發中咱們不能忙於進度而忽視了細節。

1.使用容器組件與展現組件

容器組件和展現組件名詞來自於redux文檔。若是你想讓本身的React項目變得清晰可維護，那麼你須要瞭解並使用它們。

這裏咱們將組件分紅兩類，一類叫「容器組件」，我通常將它們放在containers文件夾下。這一類組件能夠理解爲最頂層的組件，其功能僅僅作數據提取，而後渲染對應的子組件。

另外一類叫「展現組件」，我通常將它們放在components文件夾下。這一類組件能夠理解爲只具備展現性的子組件，其功能僅僅是展現性的，全部數據都經過 props 傳入。

這樣分類的好處在於：關注分離，更易複用及維護，數據集中處理等。具體能夠參見：譯文《容器組件和展現組件》

2.組件劃分不宜過細，層次不宜過深

曾經有人問我React組件的劃分應不該該太細，好比是否是能夠把一個輸入框劃分爲一個組件？

我我的認爲組件不該該按照DOM元素來劃分，而是應該按照功能來劃分。若是你的一個頁面中包含了兩個功能，好比表格搜索、彈框查看，就能夠將其劃分爲兩個子組件。

一樣的組件層次也不宜過深。不少時候會存在組件中包含組件的狀況，這樣就出現了組件之間的嵌套層次。我我的認爲組件間的嵌套層次不宜超過3層，若是嵌套層次太深會直接致使功能及狀態的難以維護，就像if else語句嵌套太深同樣。

3.Redux和state並不衝突

不少開發者可能會認爲用了Redux來管理數據狀態後，咱們的組件中就不須要state了。其實我我的認爲Redux和state並不衝突。

Redux主要用於管理那些公用及異步的狀態，而state通常用於管理組件獨有的狀態。若是你的組件中存在其沒必要和其餘組件公用及非異步的單一數據，那麼你直接能夠寫在state中，好比一些loading的狀態和顯示隱藏的狀態等。

巧妙的使用Redux和state能夠幫助咱們更好的管理數據流。

4.不要渲染當前用不到的組件

在用戶操做中，有些組件可能不是一開始展現頁面的時候就須要用到的，好比某些彈框等。這樣的組件除了將其隱藏外，咱們最好不要讓它渲染在頁面上，當用戶點擊觸發的時候再進行渲染，這樣一來便起到了優化加載的做用。

5.除了劃分組件還應劃分reducer

相比組件的劃分，reducer的劃分也一樣重要。隨着應用的膨脹，咱們能夠將拆分後的 reducer 放到不一樣的文件中, 以保持其獨立性並用於專門處理不一樣的數據域。

若是一箇中大型的項目不劃分reducer，會致使單一的reducer文件代碼過於冗長而難以維護。咱們可使用Redux提供的 combineReducers()來將拆分的reducer進行合併。詳見：Redux中文文檔。

結語

事無鉅細，人無完人。一個優秀的React項目並不表明其沒有缺點，代碼優化是一個長期的過程，惟有發現問題總結問題才能給咱們帶來新的突破口。