Komponen Reaksi Berasaskan Ciri

React menjadi rangka kerja tindanan penuh dengan Komponen Pelayan React dan Tindakan Pelayan. Walaupun Komponen Pelayan Bertindak balas (RSC) membenarkan kami membaca data dalam UI daripada pangkalan data, Tindakan Pelayan membolehkan kami menulis data kembali ke pangkalan data. Sudah tentu UI dan pangkalan data akan rapat dan mudah dalam aplikasi yang kecil, tetapi dalam aplikasi yang lebih besar, akan sentiasa ada kerumitan ciri menegak yang berjalin secara tidak sengaja.

Di sini saya ingin membincangkan cara mencipta seni bina berasaskan ciri dalam React yang membolehkan aplikasi berskala besar dibina dan diselenggara. Dalam seni bina berasaskan ciri, setiap ciri dipisahkan daripada yang lain sebanyak mungkin. Dengan cara ini kita boleh memastikan komponen dan fungsi pengambilan data mereka tertumpu pada domain mereka.

Komponen Reaksi Berasaskan Ciri

Dalam aplikasi biasa, kami akan mempunyai pangkalan data dengan berbilang jadual yang berkaitan antara satu sama lain. Contohnya, aplikasi blog mungkin mempunyai jadual pengguna, jadual siaran dan jadual ulasan. Jadual siaran mungkin mempunyai kunci asing kepada jadual pengguna dan jadual ulasan mungkin mempunyai kunci asing kepada kedua-dua jadual pengguna dan siaran.

Mari kita ambil hubungan siaran dan ulasan tanpa mengambil kira jadual pengguna, demi kesederhanaan, dan lihat bagaimana ia akan mempengaruhi seni bina:

model Siaran {
id String @id @default(cuid())
Rentetan tajuk
Rentetan kandungan
komen Komen[]
}

model Ulasan {
id String @id @default(cuid())
Rentetan kandungan
siarkan Siaran @relation(medan: [postId], rujukan: [id])
postId Int
}

Dalam struktur komponen React, kami mungkin mempunyai komponen Post yang memaparkan siaran dan ulasannya. Komponen Pos, sebagai Komponen Pelayan, mungkin kelihatan seperti ini, tempat kami mengambil siaran dan ulasannya daripada pangkalan data:

import { getPost } daripada '@/features/post/queries/get-post';

const Post = tak segerak ({ postId }: { postId: string }) => {
const post = tunggu getPost(postId);

kembali (

<>{post.title}

{post.content}

{post.comments.map((comment) => (
• {comment.content}
))}

);
}

Walau bagaimanapun, untuk memastikan komponen kami fokus, kami mungkin ingin membahagikan komponen Siaran kepada dua komponen: komponen Siaran yang memaparkan siaran itu sendiri dan komponen Ulasan yang menghasilkan ulasan. Kami memfokuskan setiap komponen pada satu ciri dan oleh itu juga boleh menguatkuasakan seni bina berasaskan ciri yang bersih:

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

const Post = tak segerak ({ postId }: { postId: string }) => {
const post = tunggu getPost(postId);
kembali (

<>{post.title}
<>{post.content}
ulasan{post.comments}
/>

);
}

Memisahkan komponen kepada komponen yang lebih kecil adalah amalan terbaik yang datang dengan banyak kelebihan. Di sini kami ingin menumpukan pada seni bina ciri dan cara ia memudahkan setiap fail dalam folder cirinya sendiri dengan menyahgandingkan ciri sebanyak mungkin

Sumber

Atas ialah kandungan terperinci Komponen Reaksi Berasaskan Ciri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!