機能ベースの React コンポーネント

React は、React サーバー コンポーネントとサーバー アクションを備えたフルスタック フレームワークになりつつあります。 React Server Components (RSC) を使用すると、UI 内のデータをデータベースから読み取ることができますが、サーバー アクションを使用すると、データをデータベースに書き戻すことができます。確かに、小規模なアプリケーションでは UI とデータベースは近くてシンプルになりますが、大規模なアプリケーションでは、垂直方向の機能が意図せず絡み合う複雑さが常に存在します。

ここでは、大規模なアプリケーションの構築と保守を可能にする機能ベースのアーキテクチャを React で作成する方法について説明したいと思います。機能ベースのアーキテクチャでは、各機能が他の機能からできるだけ分離されます。このようにして、コンポーネントとそのデータ取得機能をそのドメインに集中させ続けることができます。

機能ベースの React コンポーネント

典型的なアプリケーションでは、相互に関連する複数のテーブルを含むデータベースがあります。たとえば、ブログ アプリケーションには、users テーブル、posts テーブル、comments テーブルがある場合があります。 photos テーブルには users テーブルへの外部キーがあり、comments テーブルには users テーブルとposts テーブルの両方への外部キーがある可能性があります。

わかりやすくするために、ユーザー テーブルを考慮せずに投稿とコメントの関係を取り上げ、それがアーキテクチャにどのような影響を与えるかを見てみましょう。

モデル投稿{
id 文字列 @id @default(cuid())
タイトル文字列
コンテンツ文字列
コメント コメント[]
}

モデルコメント{
id 文字列 @id @default(cuid())
コンテンツ文字列
post 投稿 @relation(フィールド: [postId]、参照: [id])
postId Int
}

React コンポーネント構造には、投稿とそのコメントをレンダリングする Post コンポーネントが含まれる場合があります。サーバー コンポーネントとしての Post コンポーネントは次のようになります。ここでは、データベースから投稿とそのコメントを取得します。

「@/features/post/queries/get-post」から { getPost } をインポートします;

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

戻る (

<>{post.title}

{post.content}

{post.comments.map((コメント) => (
• {comment.content}
))}

);
}

ただし、コンポーネントに焦点を当て続けるために、Post コンポーネントを 2 つのコンポーネントに分割することもできます。1 つは投稿自体をレンダリングする Post コンポーネント、もう 1 つはコメントをレンダリングする Comments コンポーネントです。各コンポーネントを 1 つの機能に集中させているため、クリーンな機能ベースのアーキテクチャを強制することもできます。

import { Comments } from '@/features/comment/components/comments';
import { getPost } from '@/features/post/queries/get-post';

const Post = async ({ postId }: { postId: string }) => {
const post = await getPost(postId);
戻る (

<>{post.title}
<>{post.content}
コメント{post.comments}
/>

);
}

コンポーネントをより小さなコンポーネントに分割することは、多くの利点を伴うベスト プラクティスです。ここでは、機能アーキテクチャと、機能を可能な限り分離することで独自の機能フォルダー内の各ファイルをどのように簡素化するかに焦点を当てたいと思います

出典

以上が機能ベースの React コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。