Berikut adalah beberapa pelajaran yang saya pelajari tentang bagaimana tidak membina komponen React. Ini adalah perkara -perkara yang saya jumpai sejak beberapa bulan yang lalu dan fikir mereka mungkin menarik minat anda jika anda bekerja pada sistem reka bentuk, terutama sekali dengan sekumpulan keputusan teknikal warisan dan banyak hutang teknologi di bawah tudung.

Pelajaran 1: Elakkan komponen kanak -kanak sebanyak yang anda boleh

Satu perkara tentang bekerja pada sistem reka bentuk yang besar dengan banyak komponen ialah corak berikut akhirnya menjadi cepat bermasalah:

 <card>
  <card.header> tajuk </card.header>
  <card.body> <p> Ini adalah beberapa kandungan </p> </card.body>
</card>

Bahagian yang bermasalah adalah komponen kanak -kanak, kad.body dan card.header. Contoh ini tidak mengerikan kerana perkara -perkara yang agak mudah - ketika komponen menjadi lebih kompleks sehingga hal -hal dapat menjadi penipu. Sebagai contoh, setiap komponen kanak -kanak boleh mempunyai siri keseluruhan alat kompleks yang mengganggu yang lain.

Salah satu titik kesakitan saya adalah dengan komponen bentuk kami. Ambil ini:

Saya memudahkan perkara -perkara yang jauh, sudah tentu, tetapi setiap kali seorang jurutera ingin meletakkan dua butang di sebelah satu sama lain, mereka akan mengimport form.actions, walaupun tidak ada borang di halaman. Ini bermakna bahawa segala -galanya di dalam komponen bentuk akan diimport dan itu akhirnya tidak baik untuk prestasi. Ia hanya menjadi pelaksanaan reka bentuk sistem yang buruk juga.

Ini juga menjadikan perkara -perkara yang lebih sukar apabila mendokumentasikan komponen kerana sekarang anda perlu memastikan bahawa setiap komponen kanak -kanak ini juga didokumenkan.

Jadi bukannya membuat form.Actions komponen kanak -kanak, kita sepatutnya menjadikannya komponen baru, hanya: formasi (atau mungkin sesuatu dengan nama yang lebih baik seperti ButtonGroup). Dengan cara itu, kita tidak perlu mengimport borang sepanjang masa dan kita boleh menyimpan komponen berasaskan susun atur yang terpisah dari yang lain.

Saya telah belajar pelajaran saya. Dari sini, saya akan mengelakkan komponen kanak -kanak sama sekali di mana saya boleh.

Pelajaran 2: Pastikan alat peraga anda tidak bertentangan antara satu sama lain

Mandy Michael menulis sekeping hebat tentang bagaimana alat peraga boleh bertemu satu sama lain dan menyebabkan pelbagai konflik yang mengelirukan, seperti contoh TypeScript ini:

 prop antara muka {
  Hidemedia?: Boolean
  MediaisedGetoEdge?: Boolean
  MediaFullHeight?: Boolean
  VideoInline?: Boolean
}

Mandy menulis:

Tujuan alat ini adalah untuk mengubah cara imej atau video diberikan dalam kad atau jika media diberikan sama sekali. Masalah dengan mendefinisikannya secara berasingan adalah bahawa anda berakhir dengan beberapa bendera yang togol ciri -ciri komponen, yang kebanyakannya saling eksklusif. Sebagai contoh, anda tidak boleh mempunyai imej yang mengisi margin jika ia juga tersembunyi.

Ini pastinya masalah bagi banyak komponen yang kami warisi dalam sistem reka bentuk pasukan saya. Terdapat sekumpulan komponen di mana alat boolean akan membuat komponen berkelakuan dalam pelbagai cara yang ganjil dan tidak dijangka. Kami juga mempunyai pelbagai jenis bug yang muncul dalam komponen kad kami semasa pembangunan kerana para jurutera tidak akan tahu apa alat peraga untuk menghidupkan dan mematikan untuk apa -apa kesan yang diberikan!

Mandy menawarkan penyelesaian berikut:

 Taip MediaMode = 'Tersembunyi' | 'Edgetoedge' | 'Fullheight'

prop antara muka {
  MediaMode: 'Tersembunyi' | 'Edgetoedge' | 'Fullheight'
}

Pendek kata: Jika kita menggabungkan semua pilihan yang baru muncul bersama -sama maka kita mempunyai API yang lebih bersih yang mudah diperpanjang dan kurang berkemungkinan menyebabkan kekeliruan pada masa akan datang.

Itu sahaja! Saya hanya mahu membuat nota cepat mengenai kedua -dua pelajaran tersebut. Inilah soalan saya untuk anda: Apa yang telah anda pelajari ketika membuat komponen atau bekerja pada sistem reka bentuk?

Atas ialah kandungan terperinci Dua pelajaran yang saya pelajari daripada membuat komponen React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!