基于特征的 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中文网其他相关文章！