一個(gè)Title組件里塞了3種按鈕邏輯，類型用字符串枚舉控制。這種寫法在2023年的代碼評(píng)審里依然能過(guò)，但產(chǎn)品上線后第4個(gè)需求進(jìn)來(lái)時(shí)，開發(fā)者開始罵娘。

這不是技術(shù)債的典型案例，是設(shè)計(jì)模式課沒講透的后遺癥。開閉原則（OCP，Open Closed Principle）說(shuō)"對(duì)擴(kuò)展開放，對(duì)修改封閉"，但很多人直到被需求淹沒才懂這句話的代價(jià)。

一個(gè)Props對(duì)象埋下的雷

原文里的Title組件接收5個(gè)Props：title、type、href、buttonText、onClick。type字段用聯(lián)合類型鎖死三種形態(tài)："default" | "withLinkButton" | "withNormalButton"。

渲染邏輯用條件分支硬編碼：type匹配字符串，決定要不要渲染按鈕、渲染哪種按鈕。這種寫法在需求穩(wěn)定時(shí)人畜無(wú)害，甚至顯得"簡(jiǎn)潔"。

問(wèn)題藏在"修改"兩個(gè)字里。

產(chǎn)品經(jīng)理說(shuō)標(biāo)題旁邊要加tooltip，開發(fā)者得做三件事：改Props類型定義、加"withTooltip"分支、測(cè)試前三種形態(tài)有沒有被改壞。每次擴(kuò)展都要碰核心文件，回歸測(cè)試成本線性增長(zhǎng)。

更隱蔽的坑是type字段的語(yǔ)義污染。它描述的是"有沒有按鈕、什么按鈕"，但新需求可能是"按鈕旁邊加圖標(biāo)"或"標(biāo)題帶副標(biāo)題"。字符串枚舉的擴(kuò)展性在第三個(gè)需求后就捉襟見肘。

組合模式怎么解耦

重構(gòu)后的方案把Title拆成容器組件和具體實(shí)現(xiàn)�；A(chǔ)Title只負(fù)責(zé)布局和標(biāo)題渲染，children作為插槽暴露出去。

Link按鈕版本、普通按鈕版本各自封裝成獨(dú)立組件，內(nèi)部組裝基礎(chǔ)Title。新需求來(lái)了？新建一個(gè)TitleWithTooltip組件，完全不碰現(xiàn)有代碼。

擴(kuò)展成本從"改核心+全量回歸"變成"寫新文件+單測(cè)新組件"。

這種模式在React生態(tài)里有成熟實(shí)踐。Ant Design的Modal、Form，Radix UI的Dialog，都是容器+插槽的思路。區(qū)別只在于有沒有把"不要改舊代碼"當(dāng)成鐵律。

原文沒提但值得注意：組合模式在TypeScript里需要處理好children的類型約束�；A(chǔ)Title的children用ReactNode太寬，用特定組件類型又太死，實(shí)際項(xiàng)目中往往要配合render props或context做類型收窄。

為什么團(tuán)隊(duì)明知故犯

第一種寫法在代碼量上確實(shí)少。5個(gè)Props、3個(gè)條件分支，200行內(nèi)搞定。組合模式需要3個(gè)文件、更多樣板代碼，評(píng)審時(shí)容易被質(zhì)疑"過(guò)度設(shè)計(jì)"。

但代碼量的比較有個(gè)陷阱：它只算第一次寫的成本，不算后面修改的成本。原文的場(chǎng)景里，第二次加tooltip時(shí)，第一種方案的總代碼量（含測(cè)試）就已經(jīng)反超。

另一個(gè)阻力是團(tuán)隊(duì)習(xí)慣。很多前端從jQuery時(shí)代過(guò)來(lái)，習(xí)慣了"拿到需求改組件"的肌肉記憶。React官方文檔早期推崇的"一切皆組件"口號(hào)，被誤讀成"把所有東西塞進(jìn)一個(gè)組件"。

2019年React Hooks發(fā)布后，函數(shù)組件成為主流，組合模式的實(shí)踐才逐漸普及。但歷史包袱還在——你能在2024年的生產(chǎn)代碼里找到大量class組件時(shí)代的"萬(wàn)能組件"遺跡。

開閉原則的邊界在哪

嚴(yán)格遵循OCP需要預(yù)判變化方向。如果產(chǎn)品經(jīng)理明確說(shuō)"標(biāo)題區(qū)域永遠(yuǎn)只有這三種按鈕"，第一種寫法就是合理的技術(shù)債。問(wèn)題在于這種承諾在敏捷開發(fā)里幾乎不可信。

原文的解決方案也有成本。組件數(shù)量膨脹后，目錄結(jié)構(gòu)需要設(shè)計(jì)。Title、TitleWithLink、TitleWithButton、TitleWithTooltip散落在各處，還是按功能聚合到title/目錄下？這關(guān)系到代碼可發(fā)現(xiàn)性。

更現(xiàn)實(shí)的折中是"預(yù)留擴(kuò)展點(diǎn)但不提前實(shí)現(xiàn)"�；A(chǔ)Title保留children，但先只實(shí)現(xiàn)一種具體形態(tài)。需求來(lái)了再擴(kuò)展，比推倒重來(lái)便宜得多。

你的團(tuán)隊(duì)現(xiàn)在怎么處理這類場(chǎng)景？是堅(jiān)持組合模式，還是用條件分支硬扛？最近一次因?yàn)?加個(gè)type"導(dǎo)致的線上事故是什么時(shí)候？