談談 React 那些小事

勞卜發表於2019-01-14

前言

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

三分天下,前端雖亂,但美其名曰“繁榮”。每一次突破性的革命必定會迎來成千上萬的追隨者,我們可以看一下一份來自NPM的統計資料:

談談 React 那些小事

上圖統計的是全球範圍內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專案並不代表其沒有缺點,程式碼優化是一個長期的過程,唯有發現問題總結問題才能給我們帶來新的突破口。

相關文章