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

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

基於功能的 React 元件

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

為了簡單起見，我們?cè)诓豢紤]用戶表的情況下考慮帖子和評(píng)論的關(guān)係，看看它將如何影響架構(gòu)：

模特兒貼文{
id String @id @default(cuid())
標(biāo)題字串
內(nèi)容字串
評(píng)論評(píng)論[]
}

模型評(píng)論{
id String @id @default(cuid())
內(nèi)容字串
post Post @relation(字段: [postId], 參考文獻(xiàn): [id])
postId Int
}

在 React 元件結(jié)構(gòu)中，我們可能有一個(gè) Post 元件來呈現(xiàn)貼文及其評(píng)論。 Post 元件作為伺服器元件，可能看起來像這樣，我們從資料庫中取得貼文及其評(píng)論：

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

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

返回（

{post.title}>

{貼文.內(nèi)容}

{post.comments.map((評(píng)論) => (
• {評(píng)論.內(nèi)容}
))}

);
}

但是，為了讓我們的元件保持專注，我們可能希望將 Post 元件拆分為兩個(gè)元件：一個(gè)用於呈現(xiàn)貼文本身的 Post 元件，以及一個(gè)用於呈現(xiàn)評(píng)論的 Comments 元件。我們將每個(gè)組件集中在一個(gè)功能上，因此也可以強(qiáng)制實(shí)施一個(gè)乾淨(jìng)的基於功能的架構(gòu)：

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

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

{post.title}>
{post.content}>
評(píng)論{post.comments}
//>

);
}

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

來源

以上是基於特徵的 React 元件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！