基於特徵的 React 元件

React 正在成為一個包含 React 伺服器元件和伺服器操作的全端框架。 React 伺服器元件 (RSC) 允許我們從資料庫讀取 UI 中的數據，而伺服器操作使我們能夠將數據寫回資料庫。當然，在小型應用程式中，UI 和資料庫會緊密且簡單，但在較大的應用程式中，總是會存在無意中交織在一起的垂直功能的複雜性。

在這裡，我想討論如何在 React 中建立基於功能的架構，以允許建置和維護大規模應用程式。在基於功能的架構中，每個功能都盡可能地與其他功能解耦。這樣我們就可以讓元件及其資料獲取函數專注於它們的領域。

基於功能的 React 元件

在典型的應用程式中，我們將擁有一個包含多個彼此相關的表的資料庫。例如，部落格應用程式可能有一個使用者表、一個貼文表和一個評論表。 posts 表可能有一個到 users 表的外鍵，而 comments 表可能有一個到 users 和 posts 表的外鍵。

為了簡單起見，我們在不考慮用戶表的情況下考慮帖子和評論的關係，看看它將如何影響架構：

模特兒貼文{
id String @id @default(cuid())
標題字串
內容字串
評論評論[]
}

模型評論{
id String @id @default(cuid())
內容字串
post Post @relation(字段: [postId], 參考文獻: [id])
postId Int
}

在 React 元件結構中，我們可能有一個 Post 元件來呈現貼文及其評論。 Post 元件作為伺服器元件，可能看起來像這樣，我們從資料庫中取得貼文及其評論：

從 '@/features/post/queries/get-post' 匯入 { getPost };

const Post = async ({ postId }: { postId: string }) =>; {
const post =等待 getPost(postId);

返回（

{post.title}>

{貼文.內容}

{post.comments.map((評論) => (
• {評論.內容}
))}

);
}

但是，為了讓我們的元件保持專注，我們可能希望將 Post 元件拆分為兩個元件：一個用於呈現貼文本身的 Post 元件，以及一個用於呈現評論的 Comments 元件。我們將每個組件集中在一個功能上，因此也可以強制實施一個乾淨的基於功能的架構：

從 '@/features/comment/components/comments' 導入 { Comments };
從 '@/features/post/queries/get-post' 匯入 { getPost };

const Post = async ({ postId }: { postId: string }) =>; {
const post =等待 getPost(postId);
返回（

{post.title}>
{post.content}>
評論{post.comments}
//>

);
}

將組件分割為更小的組件是一種最佳實踐，它具有許多優點。在這裡，我們希望專注於功能架構以及它如何透過盡可能解耦功能來簡化其自己的功能資料夾中的每個檔案

來源

以上是基於特徵的 React 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！