資訊專欄INFORMATION COLUMN
摘要：在如今的前端框架界，三分天下的時代已經到來，而曾經一統天下的局面已一去不復返。三分天下，前端雖亂，但美其名曰繁榮。那些小事俗話說千里之堤毀于蟻穴，在開發中我們不能忙于進度而忽視了細節。
前言
說起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項目并不代表其沒有缺點，代碼優化是一個長期的過程，唯有發現問題總結問題才能給我們帶來新的突破口。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91142.html
摘要：什么叫保持登錄狀態比如說我在百度頁面進行了登錄，但是不找個地方記錄這個登錄態的話。那我去頁面，我的登錄態怎么保持呢難道要攜帶嗎這肯定是不安全的。你讓用戶再登錄一次登個鬼，再見為什么需要登錄態？ 因為需要識別用戶是誰，否則怎么在網站上看到個人相關信息呢？ 為什么需要登錄體系？ 因為HTTP是無狀態的，什么是無狀態呢？ 就是說這一次請求和上一次請求是沒有任何關系的，互不認識的，沒有關聯的。 我們...
摘要：弄了一個持續更新的筆記，可以去看看，鏈接地址此篇文章的地址使用兩年后值得嗎基礎筆記的地址可以也可以。使用，你可以使用抽象類等功能。有關抽象類的更多信息支持，和方法，只讀屬性。 弄了一個持續更新的github筆記，可以去看看，鏈接地址：Front-End-Basics 此篇文章的地址：使用TypeScript兩年后-值得嗎？ 基礎筆記的github地址：https://githu...
摘要：的過期策略是什么樣的采用了定期刪除惰性刪除的過期策略。定期刪除原理定期刪除指的是默認每隔就隨機抽取一些設置了過期時間的，檢測這些是否過期，如果過期了就將其刪掉。所有只會抽取一部分而不會全部檢查。 1.數據為什么會過期？ 首先，要明白redis是用來做數據緩存的，不是用來做數據存儲的(當然也可以當數據庫用)，所以數據時候過期的，過期的數據就不見了，過期主要有兩種情況， ①在設置緩存數據時制定了...
閱讀 1894·2021-11-24 11:16
閱讀 3257·2021-09-10 10:51
閱讀 3180·2021-08-03 14:03
閱讀 1261·2019-08-29 17:03
閱讀 3238·2019-08-29 12:36
閱讀 2219·2019-08-26 14:06
閱讀 493·2019-08-23 16:32
閱讀 2662·2019-08-23 13:42
