有沒有那種瞬間——打開一個 React 文件，看到 <EverythingWrapper> 包裹著 <Layout>，再套著 <PageShell>，外面還有個 <MainContainer>，瞬間只想合上電腦去戶外透透氣？

完全理解你的感受。

像俄羅斯套娃一樣層層嵌套組件，看似條理分明，實際上過了頭就成了「架構(gòu)版的意大利面」。

來聊聊組件組合用過頭會帶來什么問題，為什么它拖慢性能和折磨你的心智，以及如何優(yōu)雅地避免。

問題：為組件而組件

React 鼓勵組件化，這是它的核心理念。

但常被忽視的是：組件不是文件夾，你不需要為每個視覺盒子都創(chuàng)建組件。

舉個例子：

圖片

如果在看到真正內(nèi)容之前，組件嵌套層數(shù)已經(jīng)超過六層，那么該好好反思設計了。

為什么這樣很糟糕？

• 心理負擔加重每增加一層，就多一個文件、多一個 import，腦袋跳轉(zhuǎn)的負擔也跟著加大。
• 調(diào)試成噩夢出錯時根本不知道問題到底在哪一層？是 ContentContainer 的 padding 出錯，還是 Layout，抑或 PageWrapper？
• 不必要的重復渲染樹越深，渲染成本越高。除非你全局 memo 化（大概率沒有），否則性能受到影響。
• 命名疲勞組件名字越來越像 <InnerCardWrapperShell>，大家都在假裝沒問題。

正確做法是什么？

? 盡量扁平化不帶邏輯、不增加語義價值的包裝組件，直接刪掉。

壞例子：

<Wrapper>
  <Container>
    <Box>
      <ActualContent />
    </Box>
  </Container>
</Wrapper>

好例子：

<div className="p-6 max-w-4xl mx-auto">
  <ActualContent />
</div>

不必為了加個邊距就造組件。

? 有邏輯或復用才抽離問自己：這段代碼里有業(yè)務邏輯、有狀態(tài)，或者會多處復用嗎？

如果沒有，直接寫內(nèi)聯(lián)。

合理抽離示例：

<Card>
  <CardHeader title="歡迎！" />
  <CardBody description="感謝注冊。" />
</Card>

無意義抽離示例：

<MarginTopTenWrapper>
  <MaxWidthWrapper>
    <JustifyCenterWrapper>
      <ActualContent />
    </JustifyCenterWrapper>
  </MaxWidthWrapper>
</MarginTopTenWrapper>

沒人想打開三個文件去搞清楚這是幾個像素的邊距。

? 用工具類代替包裝有時候嵌套只是為了布局或?qū)R，這正是實用工具類 CSS（比如 Tailwind）的強項。

<div className="flex justify-center items-center h-screen">
  <ActualContent />
</div>

簡單，干凈，無額外組件，更少混亂。

? 按意圖歸類 UI不是為了視覺結(jié)構(gòu)嵌套，而是根據(jù)功能和邏輯來組織。

比如 <UserCard> 就應該包含所有與用戶相關(guān)的東西，不要讓它被五個無意義的包裝組件包裹。

抽離組件前自問：

“我能給這個組件起一個有意義的名字嗎？別人十秒鐘內(nèi)能看懂它嗎？”

如果答案是“嗯……”，那就別抽離，保持內(nèi)聯(lián)。

React 的魅力在于靈活性，但能拆分成組件，不代表就一定該拆。

代碼是給人看的，瀏覽器排第二。