基于 React 的組件化開發(fā)方式，為富前端 web 應(yīng)用提供大量技術(shù)實(shí)踐，社區(qū)逐漸形成了穩(wěn)定的組件規(guī)范，本文從 API 層面歸納出 6 種組件類型，分析其優(yōu)缺點(diǎn)和適用場景，為日常組件開發(fā)提供一個方法指南。6 種類型分別為結(jié)構(gòu)型組件、樣式型組件、組合型組件、配置型組件、受控型組件、非受控組件。

結(jié)構(gòu)型組件與樣式型組件

結(jié)構(gòu)型組件定義了組件大體結(jié)構(gòu)，結(jié)構(gòu)的具體實(shí)現(xiàn)由外部傳遞。樣式型組件確定了組件結(jié)構(gòu)細(xì)節(jié)，外部只需傳遞參數(shù)即可渲染預(yù)期樣式。樣式型組件是較為常用的組件類型，很少有開發(fā)者會根據(jù)一份設(shè)計(jì)稿來推斷組件未來可能的改動，這也導(dǎo)致了樣式型組件在復(fù)用性與拓展性上偏弱。對于比較通用的組件，例如 Button 按鈕、Modal 彈框、Form 表單等，不應(yīng)僅提供樣式型實(shí)現(xiàn)，應(yīng)該抽象出結(jié)構(gòu)型組件。

這兩種類型并不是非此即彼的關(guān)系，樣式型組件固定的 API 參數(shù)可以降低使用成本，結(jié)構(gòu)型組件彈性的 API 設(shè)定可以提供擴(kuò)展性，結(jié)合兩者的優(yōu)點(diǎn)可以構(gòu)造出既簡單又可拓展的組件。關(guān)于兩者結(jié)合的優(yōu)勢最具說服力的實(shí)踐是通用組件庫，結(jié)構(gòu)型組件可顯著降低業(yè)務(wù)方的溝通成本與接入風(fēng)險(xiǎn)，如下示意圖演示了業(yè)務(wù)方與組件庫之間的兩種溝通模型：

以上兩種模型每一個箭頭為一個工時，樣式型組件庫完成一次需求變更需要三個工時，業(yè)務(wù)方要等待組件庫實(shí)現(xiàn)功能后才能進(jìn)行下一步。結(jié)構(gòu)型組件庫給予業(yè)務(wù)方更多的自主性，不用等待組件庫實(shí)現(xiàn)新特性，通過自定義結(jié)構(gòu)滿足當(dāng)前需求，組件庫有充足的時間分析需求是否通用，是否值得提供新 API，結(jié)構(gòu)型組件在這個過程中扮演了緩沖區(qū)的角色，使得業(yè)務(wù)方與組件庫可以并行協(xié)同開發(fā)，確保各自的研發(fā)效率與節(jié)奏。

組合型組件與配置型組件

組合型組件以 JSX 為主體，通過組件間的嵌套組合描述業(yè)務(wù)邏輯。配置型組件通過 props 傳遞數(shù)據(jù)結(jié)構(gòu)，組件內(nèi)部根據(jù)預(yù)先設(shè)定好的邏輯渲染視圖。日常開發(fā)傾向于寫配置型組件，組合型組件更多的出現(xiàn)在通用組件庫中。

組合型組件結(jié)構(gòu)清晰，擴(kuò)展性高，組件使用者通過閱讀 JSX 的 render 函數(shù)即可了解業(yè)務(wù)邏輯，但組件間聯(lián)系微弱，ref 引用相互隔離，難以構(gòu)建復(fù)雜的交互組件。配置型組件需要寫的代碼量少，但組件內(nèi)部渲染處于黑箱，使用者難以理解組件邏輯，使其在拓展性上偏弱。比較基礎(chǔ)的組件，例如 Form 表單，Select 選框等，建議采用組合型，有利于使用者組織業(yè)務(wù)代碼，復(fù)雜交互組件可使用配置型。

組合型組件最具代表性的實(shí)踐是 Ant Design，整個組件庫的 API 設(shè)計(jì)嚴(yán)格遵循組合型優(yōu)先原則，為同一組件的不同位面分別提供組合型結(jié)構(gòu)，使其在拓展性和易用性上都達(dá)到了很高的水準(zhǔn)。如下示意圖演示了用兩種組件類型開發(fā) Select 選框的演化模型。

受控型組件與非受控組件

這兩種類型有另一種表述：無狀態(tài)組件和有狀態(tài)組件。受控型組件內(nèi)部只負(fù)責(zé)展示，僅對外提供回調(diào)，以表達(dá)改變的期望，其最終行為完全由外部驅(qū)動。非受控組件由內(nèi)部處理某些行為，并不強(qiáng)制外部狀態(tài)同步。官方推薦輸出無狀態(tài)受控組件，但是有狀態(tài)的組件在項(xiàng)目開發(fā)中仍是必要的。

受控型組件在自身層面規(guī)范了單向數(shù)據(jù)流，可以與其他數(shù)據(jù)層框架整合，但是開發(fā)一個復(fù)雜的受控型組件，開發(fā)者可能需要向外提供數(shù)不清的接口與回調(diào)。非受控組件較為智能，組件可以自主維護(hù)狀態(tài)，但開發(fā)者常常因此懶于做狀態(tài)同步，上層組件重新渲染時，非受控組件會丟失內(nèi)部的狀態(tài)，失憶，日常開發(fā)中大多數(shù)的 bug 因此而來。

我們經(jīng)常會以內(nèi)部是否擁有 state 來衡量一個受控型組件與非受控組件，但是完全遵守這條標(biāo)準(zhǔn)將很難提供一個簡單易用的大型受控組件，所有狀態(tài)都由外部控制，使用者需要寫大量配置代碼才能跑通一個大型組件，使用成本極高。官方提供的解決方案通過兩者結(jié)合的方式來處理受控與易用的矛盾，如下示意圖展示了一個 Input 組件可以接受的參數(shù)類型。

開發(fā)一個受控與非受控兼具的組件，對組件本身的開發(fā)與維護(hù)有更高的要求，其難度隨組件本身復(fù)雜度的增加而增加。但是對組件使用者來說，這種兩者兼具的組件最能適應(yīng)快速開發(fā)與后期代碼調(diào)優(yōu)。任何有輸入輸出特性的組件（各種表單，配置 + 回調(diào)組件），都可參照上述類型定義提供 API。

總結(jié)

React 組件本質(zhì)上是 JS 函數(shù)的另一種形態(tài)，一切與函數(shù)有關(guān)的思想都可以反映在組件里，每一種組件都有其適用場景，開發(fā)一個大型 Web 項(xiàng)目需要搭配使用不同類型的組件，如何做出合適搭配則需要長時間的開發(fā)積累，在真正的項(xiàng)目里尋找最優(yōu)解。