思考組件這件事，對(duì)于產(chǎn)品經(jīng)理的產(chǎn)品思維訓(xùn)練是有幫助的。本篇文章圍繞組件展開了一系列的思考，包括如何拆解組件以及組件的未來，感興趣的小伙伴們快來一起看看吧，希望對(duì)你有所幫助。

這篇文章是我對(duì)過去半年工作的一些思考，閱讀過程中需要一些背景知識(shí)的支撐，例如你需要理解「應(yīng)用」、「低代碼」、「組件」等概念。

當(dāng)然，我會(huì)盡可能用簡(jiǎn)單的語言去表達(dá)，但還是要首先說明，這篇文章有一定的閱讀門檻。

一、組件背后的產(chǎn)品思維

在介紹什么是組件之前，我想首先說明一下組件背后的產(chǎn)品思維，因?yàn)檫@是理解組件價(jià)值的關(guān)鍵。

所謂思維，是從感性到理性的提煉結(jié)果。感性是我們面對(duì)世界看到的現(xiàn)象，理性是我們從繁雜的現(xiàn)象中抽象出來的概念和規(guī)律。

例如，在外賣平臺(tái)沒有出現(xiàn)之前，我們感受到的現(xiàn)象是「無法堂食」和「想要立刻吃到東西」之間的矛盾，當(dāng)這個(gè)矛盾成為一種普遍的社會(huì)現(xiàn)象時(shí)，能解決矛盾的外賣服務(wù)便出現(xiàn)了。

起初是門店給顧客留電話，顧客打電話訂餐品，門店老板自己送。后來供應(yīng)商多了，顧客需求多了，就出現(xiàn)了更高效地解決這個(gè)矛盾的平臺(tái)。外賣產(chǎn)品從一種感性的矛盾中脫胎出來，成為了一種新的概念和規(guī)律。這種規(guī)律就是，我打開外賣 app，就可以獲得我周圍的可配送的美食。

外賣產(chǎn)品不是從天而降的，而是感性層面的現(xiàn)象不斷累積，最終變成了理性的概念。

組件也是一樣。在互聯(lián)網(wǎng)早期，可能并沒有組件的概念（產(chǎn)品領(lǐng)域沒有，可能在技術(shù)領(lǐng)域是存在的），后來出現(xiàn)了一種現(xiàn)象是什么呢？那就是不同的業(yè)務(wù)應(yīng)用，往往采用的都是同一種或者相似的產(chǎn)品框架來完成。

例如很多公司都有自己的后臺(tái)管理工具，他們很多時(shí)候可以抽象為對(duì)數(shù)據(jù)的增改刪查；又例如很多公司內(nèi)建自己的項(xiàng)目管理工具，內(nèi)核也是一種狀態(tài)機(jī)。

哪怕是現(xiàn)在的電商領(lǐng)域，無論是以天貓、京東為代表的貨架式電商，還是以抖音為代表的興趣電商，他們 app 首頁的產(chǎn)品框架也都是以記錄列表（什么是記錄，此處就不展開）為核心。

這樣的現(xiàn)象隨著互聯(lián)網(wǎng)的高速發(fā)展而愈發(fā)明顯，繁雜的業(yè)務(wù)應(yīng)用背后是通用的產(chǎn)品架構(gòu)。但由于每個(gè)業(yè)務(wù)獨(dú)立核算、獨(dú)立運(yùn)營，導(dǎo)致一套產(chǎn)品框架往往要在不同的業(yè)務(wù)中開發(fā)多次，也就是很多人討厭的重復(fù)造輪子現(xiàn)象。

誠然，在方案設(shè)計(jì)環(huán)節(jié)，產(chǎn)品經(jīng)理會(huì)通過盡可能復(fù)用已有的成熟方案降低開發(fā)成本，但只要有一點(diǎn)點(diǎn)改動(dòng)，從開發(fā)流程上來說就需要走一遍完成的流程。

這就導(dǎo)致業(yè)務(wù)方經(jīng)常會(huì)問：“我就改這么一點(diǎn)點(diǎn)東西，為啥還要排期到那么晚”。我只能告訴你，生產(chǎn)關(guān)系就是這樣，在原有的系統(tǒng)里無論你改的是什么，可能都需要把所有干系功能都測(cè)一遍。

從上述現(xiàn)象中我們可以提煉出哪些矛盾呢？

1. 很多業(yè)務(wù)應(yīng)用的內(nèi)核是相似的，但需要多次開發(fā)
2. 凡是動(dòng)代碼的，可能就是慢的，代碼開發(fā)、測(cè)試和發(fā)布的速度趕不上業(yè)務(wù)變化的速度

在這種矛盾日益劇增時(shí)，組件出現(xiàn)了。

組件背后的產(chǎn)品思維，就是盡可能將邏輯相似的代碼塊抽象為通用的可配置的功能單元，從而高效解決復(fù)用和個(gè)性化的矛盾。

它背后體現(xiàn)出組件的兩種特性：高通用、高可配。

并帶來兩種鮮明的業(yè)務(wù)價(jià)值：復(fù)用價(jià)值、兼容價(jià)值。

二、為什么要討論組件

在介紹組件的具體特性之前，我想說一說「為什么要討論組件」。

首先，思考組件這件事，對(duì)于產(chǎn)品經(jīng)理的產(chǎn)品思維訓(xùn)練是有幫助的。我們知道，大多數(shù)產(chǎn)品經(jīng)理以擁有好的抽象能力而自居。然而他們的抽象能力，大多是建立在業(yè)務(wù)需求上的抽象能力，非產(chǎn)品角度的抽象能力。

業(yè)務(wù)需求的抽象能力，追求的是用一個(gè)產(chǎn)品化的方案解決多樣化的業(yè)務(wù)需求。例如業(yè)務(wù)方希望通過打折的方式在特定時(shí)間點(diǎn)對(duì)產(chǎn)品做促銷，這是一種從經(jīng)濟(jì)學(xué)和心理學(xué)角度出發(fā)的業(yè)務(wù)訴求。當(dāng)然要對(duì)哪些商品做促銷，促銷力度如何，促銷規(guī)則怎么樣，都依賴于不同的業(yè)務(wù)方有不同的玩法。

有些希望做滿減促銷，有些希望做限時(shí)打折，有些希望搭贈(zèng)一些臨期商品，從各自業(yè)務(wù)的角度看都是合理的，產(chǎn)品經(jīng)理要做的事情就是用產(chǎn)品來滿足業(yè)務(wù)訴求。

但組件要求產(chǎn)品經(jīng)理具備的抽象能力，是對(duì)產(chǎn)品的進(jìn)一步抽象，并對(duì)最終抽象而成的模塊做產(chǎn)品化。

例如我們經(jīng)常在大促期間見到的各種活動(dòng)頁面，雖然看起來風(fēng)格不同，且每個(gè)頁面也都是跟業(yè)務(wù)溝通之后，確定下來的共識(shí)，但從產(chǎn)品角度看其核心是相似的。

很多電商促銷頁面主要包括商品、券、轉(zhuǎn)盤、動(dòng)圖、按鈕、鏈接跳轉(zhuǎn)等要素，但抽象出來其實(shí)都是一系列的組件。

而這種從多樣化的頁面到組件的抽象過程，就是對(duì)產(chǎn)品的進(jìn)一步抽象，這是一種產(chǎn)品思維的訓(xùn)練。

其次，思考組件這件事，也有助于對(duì)產(chǎn)品經(jīng)理這個(gè)行業(yè)未來的思考奠定基礎(chǔ)。當(dāng)我從事低代碼行業(yè)的第一天我就在思考，如果我們?cè)谧龅倪@件事做成了，那很可能意味著大批的程序員和產(chǎn)品經(jīng)理的失業(yè)或轉(zhuǎn)型。

本質(zhì)原因在于，社會(huì)的發(fā)展會(huì)使得資源最終會(huì)流轉(zhuǎn)到最能用好它們的人手中，這是客觀的經(jīng)濟(jì)學(xué)規(guī)律，不以人的物質(zhì)為轉(zhuǎn)移。

還記得我們?cè)诘谝徊糠痔岢龅膬牲c(diǎn)矛盾么：重復(fù)開發(fā)和慢迭代。須知這種矛盾的背后是人力和機(jī)器資源的巨大投入。這種投入還存在，是因?yàn)楫?dāng)下我們沒有更好的解決辦法。

但如果我們往5年、10年后看去，如果產(chǎn)品經(jīng)理這個(gè)崗位帶來的業(yè)務(wù)價(jià)值已經(jīng)低于他們存在本身帶來的資源消耗，那資源就會(huì)轉(zhuǎn)移到其他崗位上。

會(huì)不會(huì)出現(xiàn)這種現(xiàn)象呢，我不確定，但我認(rèn)為應(yīng)該警惕和思考。

像輕流這樣已經(jīng)商業(yè)化的低代碼產(chǎn)品，正在幫助中小型企業(yè)搭建一些簡(jiǎn)單的表單應(yīng)用，那原來準(zhǔn)備投入到自研或外包中的資源，就節(jié)約下來了。

我一直在想，有沒有可能5 年后的互聯(lián)網(wǎng)產(chǎn)品生產(chǎn)端，負(fù)責(zé)標(biāo)準(zhǔn)化模塊（評(píng)論、訂單等）的產(chǎn)品經(jīng)理會(huì)消失，取而代之的是低代碼產(chǎn)品經(jīng)理和業(yè)務(wù)產(chǎn)品經(jīng)理，前者負(fù)責(zé)不斷完善底層工具和生態(tài)，后者負(fù)責(zé)面向不同業(yè)務(wù)方落地產(chǎn)品實(shí)施。

僅作一猜測(cè)，擺在這里。

三、拆解組件

這節(jié)，我將以騰訊微搭產(chǎn)品為例子，帶大家一起拆解組件。要拆解組件，首先要對(duì)組件做定義、分類和內(nèi)部結(jié)構(gòu)分析。

在我看來，組件是可被復(fù)用的完整的產(chǎn)品功能模塊。

可被復(fù)用是組件最顯著的特征。因?yàn)樗菍?duì)產(chǎn)品的進(jìn)一步抽象，說明它可以出現(xiàn)在不同的產(chǎn)品中，進(jìn)而在搭建應(yīng)用時(shí)，它可以出現(xiàn)在不同的頁面中。

完整是指組件代表了一個(gè)完整的使用場(chǎng)景。例如下圖中的文本組件，它代表的場(chǎng)景是在頁面中展示一段文本。且頁面中任何使用到文本的地方，都可以拖入這個(gè)組件，它也是通用的。

從這個(gè)定義出發(fā)，線條就不是一個(gè)組件，因?yàn)閱螁我粋€(gè)線條不能代表任何完整的使用場(chǎng)景，盡管它是可復(fù)用的。

最后，組件是一個(gè)功能模塊，我所理解的功能，是它具有處理信息的能力。再抽象一些，它有自己的輸入、作用和輸出。

要進(jìn)一步拆解組件，首先要對(duì)組件做分類。

原子組件：不能被進(jìn)一步拆解的組件，代表了某個(gè)功能場(chǎng)景下的最小粒度。例如上述的文本組件就是一個(gè)原子組件，因?yàn)槲也豢赡茉龠M(jìn)一步拆解出一個(gè)字符組件。它也代表了當(dāng)我需要在頁面展示文本信息時(shí)，在這個(gè)場(chǎng)景下我需要的最小功能模塊。

復(fù)合組件：由原子組件組合而成的組件，代表了復(fù)雜場(chǎng)景下的功能模塊。

例如下圖的表格組件。這種組件往往更貼合某種實(shí)際的使用場(chǎng)景，比如管理一張表格，或者填寫一個(gè)問卷，他們的目標(biāo)是在對(duì)應(yīng)的復(fù)雜業(yè)務(wù)場(chǎng)景下，可以有更便捷的方式搭建出對(duì)應(yīng)的功能模塊來。

原子組件由于粒度小，所以在搭建時(shí)的自由度更高，理論上如果一個(gè)平臺(tái)的原子組件足夠豐富，那么可以搭建出非常復(fù)雜的應(yīng)用出來。但它的劣勢(shì)在于，搭建門檻非常高。

以上圖的表格組件為例，拆開來看它包括的原子組件是：按鈕、復(fù)選框、文本、搜索框等組件，但如果我只給你提供這四個(gè)原子組件，讓你搭建出上圖這樣的效果，估計(jì)你會(huì)崩潰的。

復(fù)合組件由于更貼近實(shí)際使用的場(chǎng)景，所以搭建門檻更低。

例如對(duì)上述表格來說，我只需要給組件關(guān)聯(lián)對(duì)應(yīng)的數(shù)據(jù)模型，然后做一些字段和樣式配置，基本上在 5 分鐘內(nèi)就可以搭建出一個(gè)能對(duì)數(shù)據(jù)表做增改刪查的管理表格。

但另一方面，它的靈活性也相對(duì)被降低了，因?yàn)楹芏嗖季趾蜆邮蕉际穷A(yù)設(shè)好的，沒有可以進(jìn)一步編輯的功能，所以兼容性較差。

從上面的分析可以看出，不同的組件盡管都可以代表完整的功能場(chǎng)景，但設(shè)計(jì)上還是有不同的考慮，這種考慮往往是自由度和使用體驗(yàn)之間的平衡。這也是組件本身固有的矛盾。

組件的功能拆解，需要從輸入、作用和輸出三個(gè)角度來說。我們以經(jīng)常用到的美食篩選場(chǎng)景為例。

上圖是大眾點(diǎn)評(píng)美食頻道頁里的篩選功能，我可以通過選擇美食的種類，進(jìn)一步縮小我看到的頁面信息的范圍。那在低代碼產(chǎn)品中，這種功能模塊怎么搭建出來呢。

首先我們需要使用一個(gè)下拉選擇組件，注意，這個(gè)組件是一個(gè)抽象的組件，它既不代表美食的篩選，也不代表距離的篩選。它表達(dá)的意思是：這個(gè)組件提供了在下拉框中完成單選的功能。

要給這個(gè)組件賦以業(yè)務(wù)含義，就必須向它注入數(shù)據(jù)。例如，給這個(gè)組件關(guān)聯(lián)美食品類的數(shù)據(jù)表，這樣下拉選擇后的每一個(gè)選項(xiàng)，代表了一種美食品類。

有了輸入之后，就需要對(duì)輸入做處理，那下拉選擇組件是怎么處理的呢？它提供了一種特性，叫做用戶在 app 上點(diǎn)擊選中的數(shù)據(jù)，就代表了這個(gè)組件最新的值。

你選擇了火鍋，業(yè)務(wù)上代表了你在美食品類中選擇了火鍋，產(chǎn)品上代表了你在下拉選擇組件中，通過前端頁面的點(diǎn)擊，給組件賦值，這個(gè)值就是火鍋這個(gè)選項(xiàng)數(shù)據(jù)。

最后是輸出，輸出是該組件作為一個(gè)獨(dú)立的功能模塊，能夠給頁面、或者頁面內(nèi)的其他模塊傳遞的信息。在上述例子中，從業(yè)務(wù)上看，當(dāng)我們選擇了火鍋之后，商戶列表就完成了一次刷新，并且刷新之后只展示跟火鍋相關(guān)的商戶。

但產(chǎn)品原理上并不簡(jiǎn)單。首先，在搭建的時(shí)候，需要在頁面內(nèi)建立下拉選擇組件和商戶列表組件之間的關(guān)系，是的，看起來內(nèi)容很多的商品列表，其實(shí)也是一個(gè)組件。建立的是什么關(guān)系呢？是一種篩選邏輯關(guān)系。

在商戶列表組件的篩選條件中，我們需要加上，這個(gè)列表中每個(gè)商戶的美食品類需要等于下拉組件中選擇的美食品類。

在這個(gè)邏輯關(guān)系中，下拉組件的值作為輸出，就被商戶列表組件使用了，這種關(guān)系，用偏技術(shù)的話說叫做「消費(fèi)」，就是我用了你給我的東西。

以上只是下拉選擇組件在實(shí)際 app 中的一個(gè)很簡(jiǎn)單的應(yīng)用，事實(shí)上組件的輸入、處理和輸出遠(yuǎn)比這個(gè)場(chǎng)景要復(fù)雜很多。但無論有多么復(fù)雜，從這三個(gè)角度去分析組件的功能我理解基本都是可以的。

如何設(shè)計(jì)一款組件呢？這是很多低代碼產(chǎn)品經(jīng)理面臨的課題，也是我在過去半年內(nèi)從事的主要工作。一個(gè)完整的組件設(shè)計(jì)方案，需要重點(diǎn)考慮三個(gè)問題：

1. 屬性：這個(gè)組件的功能是什么
2. 樣式：它長什么樣子
3. 行為：它跟其他模塊之間如何交互

屬性如我們剛剛所述，需要考慮組件的輸入、處理和輸出。還是以微搭中最簡(jiǎn)單的文本組件為例。

可以看到微搭的文本組件提供了兩個(gè)最基本的屬性配置項(xiàng)：內(nèi)容和格式。它解決的就是一個(gè)問題：這個(gè)組件需要以什么方式展示什么內(nèi)容。

樣式?jīng)Q定了這個(gè)組件長什么樣子，例如它在展示區(qū)域內(nèi)的間距、位置，它是否有背景色等等。樣式的配置能力跟很多設(shè)計(jì)軟件提供的能力很像，在此就不贅述。

最后是行為，它告訴系統(tǒng)的就是一個(gè)問題：當(dāng)發(fā)生了什么事情時(shí)，會(huì)執(zhí)行什么動(dòng)作。發(fā)生了什么事情，我們一般叫做觸發(fā)事件。

它往往是一個(gè)可被捕獲的前端事件，例如點(diǎn)擊、失焦、hover 等。而執(zhí)行的動(dòng)作，就是產(chǎn)生了這些事件時(shí)，接下來需要做什么。

例如下圖是一個(gè)表單復(fù)合組件，當(dāng)我們點(diǎn)擊提交按鈕時(shí)，它捕捉到的是 click 這個(gè)事件，接著會(huì)執(zhí)行的動(dòng)作可能就是，將提交的數(shù)據(jù)更新到數(shù)據(jù)庫。

行為往往是進(jìn)行組件和組件之間以及系統(tǒng)和系統(tǒng)之間通信的橋梁，如果有機(jī)會(huì)我們可以再好好聊聊組件的行為。

四、組件的未來

我先拋出我的看法：組件未來一定要建立起生態(tài)，且組件生態(tài)一定是市場(chǎng)化的。

組件要解決的問題，類似于 SaaS 產(chǎn)品在現(xiàn)階段想要解決的矛盾：以標(biāo)準(zhǔn)化的解決方案滿足多樣化的業(yè)務(wù)訴求。

從發(fā)展的眼光看，業(yè)務(wù)訴求豐富度的增長，一定是快過產(chǎn)品解決方案能滿足的場(chǎng)景的增長，所以一定要部分場(chǎng)景是標(biāo)準(zhǔn)化的解決方案覆蓋不了的。這一點(diǎn)從國內(nèi)外的 SaaS 廠商紛紛布局自己的 PaaS 能力可以看出。

同樣的，雖然組件滿足的是快速搭建業(yè)務(wù)應(yīng)用的場(chǎng)景，但目前絕大多數(shù)的低代碼產(chǎn)品，其組件的設(shè)計(jì)還是中心化的：平臺(tái)負(fù)責(zé)設(shè)計(jì)，開發(fā)者使用。當(dāng)開發(fā)者的訴求無法被滿足時(shí)，他們提出了新的需求，平臺(tái)開發(fā)新的組件。

問題是：這種中心化開發(fā)的模式下，組件可以被稱為組件的前提是，它必須要有一定的通用性，不受場(chǎng)景的局限。這個(gè)前提本身就限制了組件模式的天花板。

事實(shí)上回歸組件的定義：可復(fù)用的完整功能模塊。在這個(gè)定義下，我們并不強(qiáng)調(diào)組件一定要由平臺(tái)生產(chǎn)和定義，平臺(tái)能不能提供生產(chǎn)組件的能力，由眾多開發(fā)者自己生產(chǎn)，自行使用呢。我理解是可以的，且在國外產(chǎn)品中已經(jīng)構(gòu)建起這樣的市場(chǎng)了。

在一款低代碼產(chǎn)品中，我們已經(jīng)能看到，當(dāng)系統(tǒng)提供的組件不能滿足你的搭建訴求時(shí)，你可以在組件市場(chǎng)中安裝更多的組件，而這些組件可能就是由第三方服務(wù)商開發(fā)完成的。

通過平臺(tái)，充分連接起組件生產(chǎn)者、組件使用者、應(yīng)用使用者等不同的利益相關(guān)方，這樣的生態(tài)會(huì)使得有越來越多的為垂直行業(yè)而服務(wù)的復(fù)合組件出現(xiàn)。

五、結(jié)語

這篇文章大致呈現(xiàn)了我對(duì)組件相關(guān)的思考，由于篇幅的限制，以及出于可讀性的考慮，與組件相關(guān)的頁面、流程、模型、變量等概念就沒有提及，但你需要知道對(duì)于一款完整應(yīng)用來說，以上這些都是很重要的系統(tǒng)。

其實(shí)，從 0 到 1 開發(fā)一款應(yīng)用并沒有那么容易，當(dāng)我從事低代碼之后，我才體會(huì)到一款應(yīng)用產(chǎn)生的背后會(huì)牽涉到如此復(fù)雜的系統(tǒng)，這是我以前工作的盲區(qū)。

在這之前我作為產(chǎn)品經(jīng)理，更多關(guān)注的是用戶和客戶的價(jià)值，較少關(guān)注產(chǎn)品的實(shí)現(xiàn)邏輯。這也是絕大多數(shù)產(chǎn)品經(jīng)理的通病，否則也不會(huì)出現(xiàn)「這個(gè)需求很簡(jiǎn)單，怎么實(shí)現(xiàn)我不管」這樣的段子。

但如果你真正走到產(chǎn)品背后，去從搭建的角度思考一款應(yīng)用的從 0 到 1 ，你會(huì)對(duì)這份工作產(chǎn)生更多的敬畏之心的。

這是我半年來最大的收獲。