組件組合（Component Composition）是React以及其他幾個JavaScript框架中的一個基本概念，它并不是近期才加入的新特性。這一概念的核心思想是利用可復用的組件來構建應用，這些組件就像獨立的磚塊一樣，每一個磚塊（組件）都是最終界面的一個獨立部分。將這些組件像搭建磚塊一樣組合起來，就構成了我們程序的整個界面。

什么是組合組件（Component Composition）

組件組合的過程

組件組合實際上就是將不同的組件像搭積木一樣放在一起的過程。在React應用開發中，你可能已經在使用組件組合了，即使你沒有意識到這就是一種控制應用狀態的不同方法。組件組合提供了一種強大的方法來構建復雜的用戶界面，同時保持代碼的清晰和可維護性。

組件組合的類型

在React中，主要有兩種類型的組件組合方法：容器組件（Container Components）和專用組件（Specialized Components）。

1.容器組件

容器組件負責管理狀態和邏輯，它們通常不關心展示層的細節，而是提供一個環境或上下文，讓其他展示性組件可以在其中運行。容器組件的主要作用是封裝和管理數據邏輯，然后將數據和行為以props的形式傳遞給子組件。這種模式使得你可以將邏輯處理和UI渲染分離開來，從而提高應用的可維護性和復用性。

2.專用組件

與容器組件相對的是專用組件，這類組件主要負責UI的展示，不直接與應用的狀態管理打交道。專用組件通過接收props來展示信息，它們可以是純函數組件或類組件，關鍵在于它們的功能通常較為具體和限定。使用專用組件可以使得組件的設計更加清晰，易于理解和重用。

示例一：通過Props傳遞組件

示例一展示了一種利用組件組合來優化React應用結構的實踐方式，這種方式避免了傳統的屬性鉆取問題。通過顯式地將一個或多個子組件作為props傳遞給父組件，我們可以在父組件內部檢索并渲染這些子組件。這種方法不僅提高了組件之間的數據傳遞效率，還增加了代碼的可讀性和可維護性。

import { useState } from 'react'

function App() {
  const [data, setData] = useState('some state')
  return <ComponentOne ComponentTwo={<ComponentTwo data={data} />} />
}

function ComponentOne({ ComponentTwo }) {
  return (
    <div>
      <p>This is Component1, it receives component2 as a prop and renders it</p>
      {ComponentTwo}
    </div>
  )
}

function ComponentTwo({ data }) {
  return <h3>This is Component two with the received state {data}</h3>
}

在這個示例中，App組件創建了一個狀態data，并將其作為ComponentTwo的prop傳遞給ComponentOne。ComponentOne接收ComponentTwo作為prop，并在其內部渲染。這種方式簡化了組件間的通信，使得組件的數據流更加清晰：

• 狀態的提升和傳遞：App組件作為根組件，它維護了狀態data，并將其直接傳遞給需要該狀態的子組件ComponentTwo。這避免了在組件樹中多層傳遞props的需要。
• 組件作為prop：將ComponentTwo作為一個propComponentTwo={<ComponentTwo data={data} />}傳遞給ComponentOne，展示了組件組合的靈活性。這種模式使得ComponentOne可以作為一個容器，渲染它接收到的任何React元素。
• 渲染子組件：ComponentOne通過{ComponentTwo}的方式在其內部渲染傳遞進來的組件，保持了組件的獨立性和可重用性。

這種組件組合的方法非常適合于需要在多個層級之間共享數據的場景，同時保持了高度的組件解耦和復用性。通過這種方式，開發者可以構建出更加靈活和高效的React應用結構，提升開發效率和用戶體驗。

此外，這種方法還體現了React組件化思想的核心——組件不僅可以是UI的封裝，還可以作為數據和行為的容器，通過組合和嵌套來構建復雜的應用邏輯。這為React應用的模塊化和可維護性提供了強有力的支持。

示例二 ：利用children屬性

示例通過使用React默認的children prop將一個或多個子組件包裹在父組件中，從而實現組件的組合。這種方法充分利用了React的組合特性，允許我們以更自然的方式在組件樹中傳遞和渲染子組件，同時保持了組件結構的清晰和代碼的簡潔。

function App() {
  const [data, setData] = useState('some state')

  return (
    <ParentComponent>
      <ComponentOne>
        <ComponentTwo data={data} />
      </ComponentOne>
    </ParentComponent>
  )
}

function ParentComponent({ children }) {
  return <div>{children}</div>
}
function ComponentOne({ children }) {
  return (
    <>
      <p>
        This is Component1, it receives component2 as a child and renders it
      </p>
      {children}
    </>
  )
}

function ComponentTwo({ data }) {
  return <h3>This is Component two with the received {data}</h3>
}

在這個例子中，App組件通過嵌套的方式將ComponentTwo作為ComponentOne的子組件，再將ComponentOne作為ParentComponent的子組件傳遞。這樣，每個組件都可以通過children prop接收并渲染其子組件：

• 父子組件的層級關系：通過將子組件直接嵌套在父組件的JSX中，我們創建了一個清晰的父子層級關系。這種結構讓組件之間的關系更加直觀，也便于管理和維護。
• 使用children prop：ParentComponent和ComponentOne通過解構children prop來接收并渲染它們的子組件。這是React提供的一種默認機制，允許我們不必顯式傳遞每一個子組件作為prop，而是可以利用JSX的嵌套結構來定義子組件。
• 靈活的組件渲染：這種方法提供了極大的靈活性。我們可以在ParentComponent或ComponentOne中加入額外的邏輯處理，比如條件渲染子組件、添加額外的樣式或者其他屬性，而不影響子組件本身的實現。

這種通過children prop進行組件組合的方法，非常適合那些結構層次清晰、需要在多個層級中傳遞內容的場景。它不僅符合React的組件化設計哲學，也讓組件的復用和擴展變得更加簡單。

總的來說，示例二展示了組件組合的另一種常見實踐，它通過React的children prop來實現父子組件之間的嵌套關系。這種方式既保持了組件間的松耦合，又能有效地組織應用的組件結構，是構建復雜React應用時常用的一種模式。

用組合組件重寫上節Context API 的示例

當我們討論如何通過組件組合來改寫基于Context API的示例時，上述兩種方法展示了組件組合的強大靈活性。通過具體的代碼示例，我們可以清晰地看到組件組合如何在實際項目中替代Context API來解決屬性鉆取問題，同時保持應用的高可維護性和靈活性。以上一篇文章 Context API 的示例進行改寫。

通過Props傳遞組件

這種方法中，我們顯式地將組件作為Props傳遞給其他組件。這樣做的好處是能夠清晰地看到數據和組件之間的關系，使得代碼更加易于理解和維護。

import { useState } from "react";

function App() {
  const [user, setState] = useState({ name: "Aegon" });
  return (
    <div>
      <Navbar />
      <MainPage content={<Content message={<Message user={user} />} />} />
    </div>
  );
}
export default App;

function Navbar() {
  return <nav style={{ background: "#10ADDE", color: "#fff" }}>Demo App</nav>;
}

function MainPage({ content }) {
  return (
    <div>
      <h3>Main Page</h3>
      {content}
    </div>
  );
}

function Content({ message }) {
  return <div>{message}</div>;
}

function Message({ user }) {
  return <p>Welcome {user.name} :)</p>;

在這個例子中，App組件通過Props將Message組件傳遞給Content組件，然后再將Content組件傳遞給MainPage組件。這種組件傳遞方式保持了數據流的清晰性和組件間的解耦。

利用children屬性

另一種組件組合的方法是利用React的children屬性，通過組件嵌套的方式來傳遞組件。這種方法的代碼更加簡潔，也更貼近React推薦的組件使用方式。

function App() {
  const [user, setState] = useState({ name: 'Aegon' })
  return (
    <div>
      <Navbar />
      <MainPage>
        <Content>
          <Message user={user} />
        </Content>
      </MainPage>
    </div>
  )
}
export default App

function Navbar() {
  return <nav style={{ background: '#10ADDE', color: '#fff' }}>Demo App</nav>
}

function MainPage({ children }) {
  return (
    <div>
      <h3>Main Page</h3>
      {children}
    </div>
  )
}

function Content({ children }) {
  return <div>{children}</div>
}

function Message({ user }) {
  return <p>Welcome {user.name} :)</p>
}

在這個示例中，通過將Message組件嵌套在Content組件內，再將Content組件嵌套在MainPage組件內，我們構建了一個清晰的組件樹結構。這種方式使得每個組件都可以獨立地管理自己的邏輯和狀態，同時保持了組件之間的靈活組合能力。

組合組件的優勢

• 靈活性：組件組合提供了一種靈活的方式來構建UI，允許開發者根據具體需求選擇最合適的組合方式。
• 可維護性：通過清晰地定義組件之間的關系和數據流，組件組合有助于提高應用的可維護性。
• 可復用性：組件組合鼓勵開發者構建可復用的組件，這些組件可以在不同的上下文中使用，從而減少代碼重復和提高開發效率。

結束

隨著我們深入探索React的組件組合能力，并通過具體的代碼示例展示了如何優化應用架構以解決屬性鉆取問題，我們不僅增強了對React靈活性的理解，也提升了我們構建高效、可維護應用的技能。組件組合作為React核心概念之一，為我們在面對復雜應用結構時提供了清晰且有效的解決方案。