一、什么是組件化
什么是組件化？不同的人對組件化有著不同理解，我理解的組件化是一種編程思想，是一種拆分代碼的方式。對前端開發(fā)來說，大到一個頁面，小到一個html標簽都可以說是一個組件。組件化的概念并不難理解，難的是理解組件化的思想。
二、如何理解組件化
在理解組件化之前，我們得先說說我們?yōu)槭裁匆薪M件化的思想以及組件化解決了什么問題。通俗的說前端組件化就是為了代碼復用，提高研發(fā)效率。那么我們在設計組件的時候難免要思考兩個問題：
- 組件該如何拆？（拆分）
- 組件該怎么用？（組合）
因此，我把‘什么是組件化？’分成了拆分和組合兩個問題。
三、組件如何拆分
大家對組件化的理解不同，組件拆分的方式也不同，因此組件拆分最重要的是有統(tǒng)一的拆分方式和拆分原則。我結合螞蟻金服前端資產市場劃分和Vue組件化應用概念總結出了四種組件：基礎組件、業(yè)務組件、區(qū)塊組件和頁面組件。
- 基礎組件：指
input、button這種基礎標簽，以及antd封裝過的通用UI組件 - 業(yè)務組件：由基礎組件組合成的業(yè)務抽象化UI，后端封裝了相應的class
- 區(qū)塊組件：由基礎組件組件和業(yè)務組件組合成的UI塊
- 頁面組件：展示給用戶的最終頁面
四種組件的關系就像數學中的點、線、面和體，體由面組成，面由線組成，面由點組成。
舉個分為消息列表和功能欄兩部分的聊天頁面的例子來學習下，可以參照微信聊天頁想象下UI。
- 業(yè)務組件：
// MessageItem
<li>
// 用戶頭像
<img />
// 用戶名
<h3>user name</h3>
// 消息內容
<p>說點啥</p>
</li>
- 區(qū)塊組件：
// MessageList
<ul>
{messages.map(message => <MessageItem message={message})}
</ul>
// FunctionBar
<div>
// 消息輸入框
<input />
// 發(fā)送消息
<button>發(fā)送</button>
</div>
- 頁面組件
// Chat
<main>
<MessageList messages={messages} />|
<FunctionBar />
</main>
這樣一個聊天頁的UI就拆分完了，大家可能會有個疑問，因為我說的這些都只是UI，沒有涉及JS業(yè)務邏輯部分。沒錯，組件的拆分并不會有這么簡單，但是在拆分組件上，我們可以先從UI上拆分出四種維度的組件，然后再根據組合的方式填充js的邏輯。
四、組件怎么組合
組件的結合方式我根據組件的數據傳遞方式合組件的邏輯處理方式也總結出了兩種：漸進式和離散式。
- 漸進式：數據逐層傳遞，組件各自負責自己的業(yè)務邏輯
- 離散式：數據統(tǒng)一處理，集中處理業(yè)務邏輯
漸進式和離散式兩種組合方式其實也分別對應了Vue和React兩種js框架的語言特點。Vue提供了v-model數據雙向綁定機制，容易處理組件上下級間的數據，比較適合漸進式，而且它本來就聲明自己是漸進式JavaScript框架。而React提倡函數式編程，是不完全雙向數據綁定的JavaScript框架，通常需要onChange事件來更新父級的state來更新View，因此React更適合離散式組合方式。當然，兩種方式都可以用兩種框架來實現。
4.1 漸進式組合方式
我們在拆分組件中的例子的組合方式就屬于漸進式組合的方式，漸進式組合方式的優(yōu)點就是組件的職責劃分清晰。缺點就是不相鄰組件之間的通信缺少靈活性。
4.2 離散式組合方式
用離散式重寫下聊天頁面：
// MessageList
<ul>
{this.props.children}
</ul>
// Chat
<main>
<MessageList>
messages.map(message => <MessageItem message={message} />
</MessageList>
<FunctionBar />
</main>
我改變了下MessageList和Chat的寫法，把message的傳遞路徑從Chat -> MessageList -> MessageItem改成了Chat -> MessageItem，這樣就可以縮減數據傳遞和callBack傳遞的路徑了。
4.3 漸進式&&離散式
漸進式和離散式的組合方式都有各自的優(yōu)點合缺點，數據單向傳遞可以采用漸進式，但是callBack最好是可以一步到位，在保證callBack路徑的基礎上盡量實現漸進式才是最好的組合方式。
最后說點什么
文章并沒有具體的說什么是組件化和什么是組件化思想，其實不管是組件化思想還是面向對象，只要是編程思想就離不開軟件設計的核心原則：高內聚低耦合。組件化并不是就是適合所有的團隊或者項目，因為在實際開發(fā)工作中會有許多不理想的情況，比如一個小項目沒有那么多重復的代碼，比如設計團隊才華橫溢根本不認可組件化等等。但是在前端工程化中，組件化才是重要的環(huán)節(jié)，在提高團隊效率方面，還有什么能比組件化優(yōu)秀呢？
