Menulis API untuk komponen Bereaksi, bagian 1: jangan membuat alat peraga yang bertentangan
Menulis API untuk Komponen Bereaksi, Bagian 2: Beri Nama untuk Perilaku, Bukan Interaksi
Menulis API untuk komponen Bereaksi, bagian 3: urutan alat peraga penting
Menulis API untuk Komponen Bereaksi, Bagian 4: Waspadai Apropacalypse!
Menulis API untuk Komponen Bereaksi, Bagian 5: Cukup Gunakan Komposisi
Kami menulis API untuk komponen Bereaksi, bagian 6: kami membuat komunikasi antar komponen
Posting ini adalah terjemahan dari artikel pertama dalam serangkaian artikel oleh Writing good component API , yang ditulis oleh @Sid . Ketika menerjemahkan, dalam situasi apa pun yang tidak dapat dipahami, saya akan dipandu oleh terjemahan resmi dari dokumentasi JS React ke dalam bahasa Rusia
Ketika datang ke Bereaksi komponen, alat peraga Anda adalah API Anda.
API yang baik harus dapat dimengerti sehingga pengembang sendiri dapat mengetahui cara bekerja dengannya. Ini berlaku tidak hanya untuk pengembangan perpustakaan komponen, tetapi juga untuk pengembangan aplikasi. Penting agar Anda dan tim Anda merasa nyaman menggunakan komponen dan API mereka.
Seri artikel ini terinspirasi oleh artikel dan ceramah dari Sebastian Markbåge , Brent Jackson , Jenn Creighton dan A. Jesse Jiryu Davis .
Setelah membaca banyak artikel + kuliah, dan setelah lebih dari setahun merancang desain sistem kosmos , saya sampai pada prinsip-prinsip pengembangan ini.
Mari kita mulai dengan yang sederhana.
Kami memiliki tombol:
<Button>Click me</Button>
Anda juga mungkin memerlukan tombol utama, yang diperlukan untuk tindakan utama pada halaman. Saya dulu suka membangun API, seolah-olah saya bisa mengatakan - "Beri saya tombol utama":
<Button>Click me</Button> <Button primary>Click me</Button>
Sekarang, seperti biasanya dengan tombol, Anda perlu beberapa opsi lagi. Berikut adalah tabel beberapa alat peraga untuk tombol:
Ada beberapa alat peraga yang dapat Anda gunakan untuk mengubah tampilan tombol. Apa yang terjadi jika seseorang menggunakannya bersama?
<Button primary destructive> Click me </Button>
Apakah ada dari mereka yang menang? Apa itu tergantung? Dari pesanan?
Mengapa ada orang yang menulis ini? Apakah ada kasus nyata ketika Anda perlu mengatakan "Beri aku tombol destructive primary "?
Dalam kebanyakan kasus ini adalah kesalahan. Tetapi jika pengembang sama sekali harus mengajukan pertanyaan seperti itu (seperti yang di atas), ini mungkin bukan API yang sangat baik.
Bagi mereka yang memutuskan akan menjadi apa API, penting:
- meminimalkan kesalahan
- meminimalkan kebingungan di sekitar API
Jadi, inilah tip # 1: jangan membuat alat peraga yang saling bertentangan.
Kami dapat dengan mudah memperbaiki kode di atas menggunakan prop yang memungkinkan Anda untuk mendapatkan daftar opsi. Sebut saja appearance
<Button appearance="default">Click me</Button> <Button appearance="primary">Click me</Button> <Button appearance="destructive">Click me</Button>
Kami dapat menambahkan daftar opsi yang didukung untuk appearance menggunakan tipe prop .
Button.PropTypes = { appearance: PropTypes.oneOf(['default', 'primary', 'secondary', 'link', 'destructive']) }
Sekarang, bahkan jika pengembang membuat kesalahan, dia akan menerima peringatan tentang ini di alat pengembangannya.
<Button appearance="danger">Click me</Button>
: : `prop` `appearance` `danger` `Button`, : `["default", "primary", "secondary", "link", "destructive"]`
Tip ini cukup mudah untuk diterapkan, tetapi itu akan membuat API Anda lebih mudah digunakan (dan mendukung).
Dari penerjemah - Saya akan memperbarui daftar artikel dalam seri ini (di awal) karena lebih banyak artikel yang diterjemahkan dan yang baru tersedia.