怎樣才能構建優秀的React組件？

怎樣才能構建優秀的React組件？

這個問題在我腦子裏轉了好幾周了，組件化的目的是爲了下降模塊之間的耦合。可是實際開發中總仍是會將某些模塊進行耦合。這裏介紹我的對組件化的理解。有何不妥之處，但願積極指出；

什麼是組件化？

百度百科：組件化是一種高效的處理複雜應用系統，更好的明確功能模塊做用的方式。

通俗理解：在幾年前端開發，應用系統中的功能模塊之間是相互依賴、高度耦合。例如：修改A模塊，就先找到跟A模塊相關聯的其餘模塊，注意修改A模塊會對其餘模塊形成的影響；組件化不是一門新技術，它是一種思想。旨於構建純粹的模塊（稱爲組件化，進行組件化的模塊爲組件），模塊單一功能原則，以此下降模塊之間的耦合和依賴。

總結：組件化主要爲了拆分複雜應用，下降模塊之間的耦合度，明確組件之間的邊界，有利於代碼維護。提升組件複用（代碼複用）；

問題總結:

一問：按照單一原則實現模塊組件化後，遇到組件之間有交互怎麼辦？

實際開發過程當中，大多數組件之間確定會有交互的。例如：《列表查詢功能模塊》能夠將其組件化分爲《列表展現組件》和《查詢組件》，因爲《列表組件》須要《查詢功能》的支持，那麼這兩個組件之間就必須存在交互了；而組件之間的交互的形式大體分爲如下兩種（以下圖所示）：

• 直接交互形式: 經過硬編碼的形式將組件之間關聯起來，關聯複雜度取決於圖一中「交互區域」面積多大，即：面積越大，組件之間耦合度越高，邊界越模糊，越不利於代碼維護和複用；
• 間接交互形式：經過第三方進行組件交互，避免了組件間的直接交互。它們之間的交互通常來講須要遵循相應的規則，不須要更改原有組件之間的邏輯；（說明：在React系統中，第三方是指自定義/高階組件、redux等實現手段）；

總結：「直接交互」和「間接交互」哪一種形式比較好？這個問題沒有具體答案，我覺得這是根據組件之間關聯的複雜度來決定。若是是小型、組件之間關聯程度低的，能夠利用「直接交互」實現。大型、組件之間關聯程度高的，可使用「間接交互」實現；

二問：根據怎樣的粒度將模塊進行組件化？

只能說根據實際項目分析、儘可能按最小粒度組件化，每一個應用系統複雜度是不一樣的，那麼劃分的狀況又是不同。沒有規則說明須要按照某種粒度來對模塊進行組件化。咱們只能在開發以前要了解清楚整個項目流程，根據實際項目中不一樣模塊採用不一樣的粒度進行組件化；例如上述提到的《列表查詢功能模塊》，你能夠將它做爲整個組件，也能夠將它拆分紅《列表展現組件》和《查詢組件》，甚至能夠進一步將《查詢模塊》拆分紅更小粒度，例如查詢組件中的表單，你能夠根據表單控件類型(input、select、button、textarea等)單獨進行組件化；

總而言之，粒度劃分大小主要要考慮到項目性質、項目需求和組件間關聯度。並且劃分粒度越小，花費的時間成本越大，組件也更利於複用和維護；

簡單實例看交互形式（這裏用了間接交互，找虐的能夠用直接交互的形式更改代碼）

DemoOneView；因爲是個簡單的Demo，故沒有采用redux等技術。純React技術實現；

項目目錄結構以下：

1. DemoOneView：理解爲系統中的某個大模塊；
2. index.js文件：提供向外開放DemoView大模塊接口；
3. DemoInfoView目錄：理解爲將DemoOneView模塊拆分紅單個模塊系統《列表查詢功能模塊》；
4. data.js文件：理解爲模擬數據（模擬HTTP請求的數據）；
5. ListComponent.jsx文件：理解爲單個模塊系統《列表查詢功能模塊》中的《列表展現系統》；
6. SearchComponent.jsx文件：理解爲單個模塊系統《列表查詢功能模塊》中的《查詢系統》；
7. Index.jsx文件：自定義組件理解爲間接交互中的第三方，用來關聯《列表展現系統》和《查詢系統》；

以上系統中組件化成了2個組件ListComponent.jsx《列表展現系統》和SearchComponent.jsx《查詢系統》，而且經過橋樑組件（所謂的第三方） Index.jsx來進行關聯交互；運行效果以下：

github源碼地址：github.com/song199210/…