useImperativeHandle: Nilai Tika Tersuai

Apabila Anda meneruskan rujukan terus kepada elemen DOM, induk menerima nod DOM mentah itu dan mendapat capaian kepada setiap kaedah serta sifat aslinya. Ini selalunya memberikan capaian yang lebih luas daripada yang mahu Anda dedahkan.

Kadang-kadang Anda mungkin lebih rela memberikan objek kecil yang dipilih khusus kepada induk berbanding keseluruhan nod DOM, sekali gus memastikan API awam komponen kekal sengaja terhad.

useImperativeHandle membolehkan Anda menyesuaikan nilai yang ditunjukkan oleh rujukan induk. Daripada menerima nod DOM, induk menerima apa-apa objek yang Anda kembalikan, jadi Anda menentukan kaedah dan nilai yang didedahkan dengan tepat.

Ini mengubah rujukan yang diteruskan menjadi antara muka imperatif yang jelas, bukannya saluran terus yang membocorkan elemen asas.

Cangkuk ini menerima rujukan yang diteruskan sebagai argumen pertama dan fungsi penjana sebagai argumen kedua. Fungsi penjana mengembalikan objek pengendali yang menjadi ref.current pada induk.

Anda memanggilnya sebagai useImperativeHandle(ref, () => ({ ... })), lalu membina objek kaedah dan nilai yang mahu Anda sediakan daripada dalam fungsi penjana tersebut.

Pola biasa ialah medan masukan tersuai yang hanya mendedahkan focus dan clear. Dalam fungsi penjana, Anda mengembalikan objek dengan dua kaedah tersebut, yang masing-masing beroperasi pada rujukan dalaman kepada medan masukan sebenar.

Induk kini boleh memfokuskan atau mengosongkan medan itu, tetapi tidak boleh membaca atribut nilai mentahnya atau mencetuskan tingkah laku DOM sewenang-wenangnya, lalu menjadikan penggunaannya lebih mudah dijangka.

Pengendali imperatif amat sesuai untuk dialog. Komponen Modal boleh mendedahkan kaedah open dan close yang menukar keadaan keterlihatan dalamannya, lalu membolehkan induk mengawalnya secara imperatif tanpa mengurus nilai benar-palsu buka itu sendiri.

Ini memudahkan kod yang perlu mencetuskan dialog dari banyak tempat, seperti memaparkan pengesahan selepas tindakan tak segerak selesai.

Dengan hanya mengembalikan kaedah yang ingin Anda sokong, Anda mewujudkan kontrak yang jelas. Pengguna bergantung pada set operasi kecil yang didokumenkan, bukannya API DOM yang sangat luas, lalu menjadikan pemfaktoran semula pada masa hadapan lebih selamat.

Permukaan imperatif yang terhad lebih mudah diuji dan difahami, serta jauh kurang berkemungkinan rosak apabila Anda mengubah pelaksanaan dalaman.

useImperativeHandle menerima argumen ketiga yang bersifat pilihan, iaitu tatasusunan kebergantungan. Apabila mana-mana kebergantungan berubah, fungsi penjana dijalankan semula dan objek pengendali dicipta semula, sama seperti cara useMemo dan useEffect berfungsi.

Jika kaedah yang Anda dedahkan menangkap nilai yang boleh berubah, senaraikan nilai tersebut sebagai kebergantungan supaya induk sentiasa menerima pengendali yang terikat pada keadaan semasa.

useImperativeHandle hanya bermakna di dalam komponen yang dibungkus dengan forwardRef kerana ia memerlukan rujukan yang diteruskan untuk melampirkan pengendali tersuai. Jika digunakan sendiri, tiada rujukan induk untuk diisi.

Oleh itu, kedua-duanya digunakan bersama: forwardRef membawa masuk rujukan, manakala useImperativeHandle menentukan perkara yang akhirnya ditunjukkan oleh rujukan tersebut.

Untuk menguji pengendali, Anda memaparkan komponen dengan rujukan, kemudian memanggil kaedah melalui ref.current di dalam blok act dan membuat penegasan terhadap tingkah laku atau perubahan DOM yang terhasil.

Oleh sebab permukaan yang didedahkan kecil dan jelas, ujian ini lebih tertumpu: setiap kaedah yang didokumenkan disahkan melakukan perkara yang dijanjikan kontraknya, bukannya menguji butiran dalaman secara rawak.

Dalam TypeScript, Anda mentakrifkan interface yang menerangkan pengendali, seperti interface yang mempunyai kaedah focus dan clear, kemudian menggunakannya untuk menaip kedua-dua generik forwardRef dan rujukan yang dipegang oleh induk.

Ini memberikan pelengkapan automatik dan semakan masa kompilasi di lokasi panggilan, supaya pengguna dapat melihat dengan tepat kaedah yang tersedia dan penggunaan yang salah dikesan sebelum masa jalan.

useImperativeHandle menyesuaikan perkara yang didedahkan oleh rujukan yang diteruskan dengan menerima rujukan serta fungsi penjana yang mengembalikan objek pengendali. Anda menggunakannya untuk menyediakan API kecil seperti focus dan clear, atau open dan close pada modal.

Ia sentiasa dipasangkan dengan forwardRef, menyokong tatasusunan kebergantungan untuk menyegarkan pengendali, dan serasi dengan interface TypeScript serta ujian yang tertumpu. Permukaan yang terhad ialah sesuatu yang disengajakan dan merupakan reka bentuk yang baik.