介紹

React 世界中非常有用且全面的東西是它的設計模式，因為它們有助於保持程式碼的可擴展性並為我們創建的元件添加意義。

有多種模式，在本文中我們將討論複合組件，這是一種高級模式，對於創建靈活的複合介面特別有用。

什麼是複合組件？

複合元件是 React 中的一種高階模式。它的目的是創建更靈活的設計，允許在一組組件之間共享狀態和邏輯，其中父組件和子組件之間的通信必須以靈活的方式完成。

元件必須協同工作來執行某些行為，而不會創建令人尷尬的屬性樹或過於複雜而無法在將來重構或理解的邏輯。

這種模式幫助我們消除道具燃燒，我們必須在組件之間傳遞道具樹。這種道具注入是一個問題，因為它可能會導致每個更新的狀態進行多次不必要的重新渲染，因為每個狀態都會更新所有子元件。

我們在 HTML 中的 select 和 option 標籤結構中有一個複合組件的範例：

選擇作為介面狀態管理器，而選項則根據選擇的工作方式進行配置。

使用複合組件的範例

在此範例中，我們將建立一個 Modal，它分為兩個複合元件：Toggle 和 Content。他們將在其中共享開啟和關閉模式的狀態。

讓我們看看一步步創建這個元件會是什麼樣子：

我們可以從建立負責管理開啟和關閉模式狀態的上下文開始

創建模態組件的基礎

請注意，我們正在使用子元件，為了取得將插入模態的元件，我們將像這樣使用它：

現在我們需要建立切換元件，它將負責開啟模態

我們還需要負責顯示 Modal 內容的內容元件

最後，我們可以將兩者分配給我們的 Modal 元件，就是這樣（:

使用

結果

透過這種方式，我們讓模態的創建和使用變得極其靈活和可重複使用。 Modal.Toggle 負責啟動模態顯示，而 Modal.Content 必須顯示我們模態的內容。

該框架允許開發人員根據應用程式的特定需求輕鬆自訂模態的行為和內容，使程式碼更乾淨、更有組織。

其他例子

我們也可以在其他上下文中使用複合組件，例如：

手風琴組件：

菜單組件：

所有這些都是靈活且適應性強的，有利於組件的開發、可擴展性和使用。

結論

我們了解如何在複合組件模式中編寫元件在我們的應用程式中發揮作用，我們也了解如何使用它以及一些適合此模式的範例。

隨意探索並嘗試使用 Compoud Components 建立元件，明智地使用它，看看在您的上下文中應用它是否真的有意義，有時，如果應用得不好，它可能會成為一個障礙。

注意：我在react4noobs上發布了相同的內容，react4noobs是一個旨在對react宇宙中開發人員創建的文章進行分組的存儲庫。值得一看=)。