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

什么是組合組件（Component Composition）

組件組合的過程

組件組合實(shí)際上就是將不同的組件像搭積木一樣放在一起的過程。在React應(yīng)用開發(fā)中，你可能已經(jīng)在使用組件組合了，即使你沒有意識到這就是一種控制應(yīng)用狀態(tài)的不同方法。組件組合提供了一種強(qiáng)大的方法來構(gòu)建復(fù)雜的用戶界面，同時(shí)保持代碼的清晰和可維護(hù)性。

組件組合的類型

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

1.容器組件

容器組件負(fù)責(zé)管理狀態(tài)和邏輯，它們通常不關(guān)心展示層的細(xì)節(jié)，而是提供一個(gè)環(huán)境或上下文，讓其他展示性組件可以在其中運(yùn)行。容器組件的主要作用是封裝和管理數(shù)據(jù)邏輯，然后將數(shù)據(jù)和行為以props的形式傳遞給子組件。這種模式使得你可以將邏輯處理和UI渲染分離開來，從而提高應(yīng)用的可維護(hù)性和復(fù)用性。

2.專用組件

與容器組件相對的是專用組件，這類組件主要負(fù)責(zé)UI的展示，不直接與應(yīng)用的狀態(tài)管理打交道。專用組件通過接收props來展示信息，它們可以是純函數(shù)組件或類組件，關(guān)鍵在于它們的功能通常較為具體和限定。使用專用組件可以使得組件的設(shè)計(jì)更加清晰，易于理解和重用。

示例一：通過Props傳遞組件

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

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>
}

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

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

這種組件組合的方法非常適合于需要在多個(gè)層級之間共享數(shù)據(jù)的場景，同時(shí)保持了高度的組件解耦和復(fù)用性。通過這種方式，開發(fā)者可以構(gòu)建出更加靈活和高效的React應(yīng)用結(jié)構(gòu)，提升開發(fā)效率和用戶體驗(yàn)。

此外，這種方法還體現(xiàn)了React組件化思想的核心——組件不僅可以是UI的封裝，還可以作為數(shù)據(jù)和行為的容器，通過組合和嵌套來構(gòu)建復(fù)雜的應(yīng)用邏輯。這為React應(yīng)用的模塊化和可維護(hù)性提供了強(qiáng)有力的支持。

示例二 ：利用children屬性

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

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>
}

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

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

這種通過children prop進(jìn)行組件組合的方法，非常適合那些結(jié)構(gòu)層次清晰、需要在多個(gè)層級中傳遞內(nèi)容的場景。它不僅符合React的組件化設(shè)計(jì)哲學(xué)，也讓組件的復(fù)用和擴(kuò)展變得更加簡單。

總的來說，示例二展示了組件組合的另一種常見實(shí)踐，它通過React的children prop來實(shí)現(xiàn)父子組件之間的嵌套關(guān)系。這種方式既保持了組件間的松耦合，又能有效地組織應(yīng)用的組件結(jié)構(gòu)，是構(gòu)建復(fù)雜React應(yīng)用時(shí)常用的一種模式。

用組合組件重寫上節(jié)Context API 的示例

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

通過Props傳遞組件

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

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>;

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

利用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>
}

在這個(gè)示例中，通過將Message組件嵌套在Content組件內(nèi)，再將Content組件嵌套在MainPage組件內(nèi)，我們構(gòu)建了一個(gè)清晰的組件樹結(jié)構(gòu)。這種方式使得每個(gè)組件都可以獨(dú)立地管理自己的邏輯和狀態(tài)，同時(shí)保持了組件之間的靈活組合能力。

組合組件的優(yōu)勢

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

結(jié)束

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