基于特征的 React 组件

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《基于特征的 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 组件》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！