Bagaimana fitur Ref baru sebagai prop meningkatkan efisiensi pengembangan

API yang lebih sederhana dan lebih intuitif

Melewati referensi sebagai alat peraga biasa adalah API yang lebih alami dan intuitif dibandingkan dengan menggunakan `forwardref`. Ini selaras lebih baik dengan prinsip inti React dari meneruskan data ke pohon komponen melalui alat peraga. Ini membuat kode lebih mudah dipahami dan dipikirkan, terutama untuk pemula.

Boilerplate yang dikurangi

Menggunakan `forwardref` membutuhkan pembungkus komponen anak dalam panggilan` forwardref` dan melewati `ref` sebagai argumen kedua ke komponen fungsi. Ini menambahkan beberapa kode boilerplate. Melewati Ref secara langsung sebagai penyangga menghilangkan kode tambahan ini.

enkapsulasi yang lebih baik

Saat menggunakan `forwardref`, komponen anak perlu menyadari bahwa ia menerima ref dan perlu melampirkannya ke elemen DOM yang sesuai. Melewati REF sebagai prop memungkinkan komponen anak tetap tidak menyadari ref, meningkatkan enkapsulasi.

refactoring yang lebih mudah

Jika Anda perlu refactor pohon komponen dan mengubah titik lampiran ref, lebih mudah untuk memperbarui nama prop daripada harus memperbarui panggilan `forwardref` di beberapa tempat. Ini membuat basis kode lebih bisa dipertahankan.

konsisten dengan komponen kelas

Dalam komponen kelas, referensi dilampirkan menggunakan `ref` prop, bukan melalui mekanisme` forwardref` khusus. Mengizinkan referensi sebagai alat peraga dalam komponen fungsi menyediakan API yang lebih konsisten di seluruh kelas dan komponen fungsi.

Pemeriksaan Jenis yang Lebih Mudah

Saat menggunakan TypeScript, lebih sederhana untuk mengetik periksa ref yang dilewati sebagai prop dibandingkan dengan menggunakan jenis `forwardref` dan` refattributes`. Jenis prop dapat disimpulkan langsung dari objek `ref`.

Singkatnya, fitur referensi baru sebagai alat peraga membuat API React lebih intuitif, mengurangi boilerplate, meningkatkan enkapsulasi, dan membuat basis kode lebih dapat dipelihara - yang semuanya meningkatkan efisiensi pengembang ketika bekerja dengan referensi dalam React 19 dan lebih dari [1] [3] [4].