useImperativeHandle: Özel Örnek Değerleri

Bir ref'i doğrudan bir DOM öğesine aktardığınızda, üst bileşen o ham DOM düğümünü alır ve düğümdeki tüm yerel yöntemlere ve özelliklere erişim kazanır. Bu, dışa açmak istediğinizden çoğu zaman daha geniş bir kapsamdır.

Bazen üst bileşene tam DOM düğümü yerine küçük ve özenle seçilmiş bir nesne vermeyi tercih edersiniz; böylece bileşeninizin herkese açık arayüzünü bilinçli olarak dar tutarsınız.

useImperativeHandle, üst bileşenin ref'inin gösterdiği değeri özelleştirmenizi sağlar. Üst bileşen DOM düğümü yerine döndürdüğünüz nesneyi alır; böylece hangi yöntemlerin ve değerlerin dışa açılacağına tam olarak siz karar verirsiniz.

Bu, aktarılan ref'i temel öğeye sızdıran bir geçiş yerine, tanımlı bir imperatif arayüze dönüştürür.

Kanca, aktarılan ref'i ilk bağımsız değişken olarak, fabrika işlevini ise ikinci bağımsız değişken olarak alır. Fabrika işlevi, üst bileşendeki ref.current hâline gelen tutamaç nesnesini döndürür.

Bunu useImperativeHandle(ref, () => ({ ... })) şeklinde çağırır ve fabrika işlevinin içinde kullanıma sunmak istediğiniz yöntem ve değerlerden oluşan nesneyi oluşturursunuz.

Yaygın bir kalıp, yalnızca focus ve clear işlemlerini dışa açan özel bir giriş alanıdır. Fabrika işlevinin içinde, her biri gerçek giriş alanına yönelik dahili bir ref üzerinde çalışan bu iki yöntemi içeren bir nesne döndürürsünüz.

Artık üst bileşen alanı odaklayabilir veya temizleyebilir; ancak alanın ham value özniteliğini okuyamaz ya da keyfî DOM davranışlarını tetikleyemez. Bu da kullanımı öngörülebilir tutar.

İmperatif tutamaçlar iletişim kutularına çok uygundur. Bir Modal bileşeni, iç görünürlük durumunu değiştiren open ve close yöntemlerini dışa açabilir; böylece üst bileşen, open boole değerini kendisi yönetmeden bileşeni emirsel olarak denetleyebilir.

Bu, eşzamansız bir işlem tamamlandıktan sonra onay iletişim kutusu göstermek gibi, bir iletişim kutusunu birçok yerden tetiklemesi gereken kodlar için kullanışlıdır.

Yalnızca desteklemeyi amaçladığınız yöntemleri döndürerek net bir sözleşme oluşturursunuz. Kullanıcılar, geniş DOM programlama arayüzüne bağımlı olmak yerine küçük ve belgelenmiş bir işlem kümesine dayanır; bu da gelecekteki yeniden düzenlemeleri daha güvenli hâle getirir.

Dar bir imperatif kapsamı sınamak ve anlamlandırmak daha kolaydır; ayrıca iç uygulamayı değiştirdiğinizde bozulma olasılığı çok daha düşüktür.

useImperativeHandle, isteğe bağlı üçüncü bir bağımsız değişken olan bağımlılık dizisini kabul eder. Herhangi bir bağımlılık değiştiğinde fabrika işlevi yeniden çalışır ve tutamaç nesnesi yeniden oluşturulur; useMemo ve useEffect'in çalışma biçimine benzer.

Dışa açtığınız yöntemler değişebilen değerleri kapsıyorsa, üst bileşenin her zaman geçerli duruma bağlı bir tutamaç alması için bu değerleri bağımlılık olarak listeleyin.

useImperativeHandle yalnızca forwardRef ile sarılmış bir bileşenin içinde anlamlıdır; çünkü özel tutamacı bağlamak için aktarılan ref'e ihtiyaç duyar. Tek başına dolduracağı bir üst bileşen ref'i olmaz.

Bu nedenle ikisi birlikte kullanılır: forwardRef ref'i içeri getirir, useImperativeHandle ise ref'in sonunda neyi göstereceğini tanımlar.

Bir tutamacı sınamak için bileşeni bir ref ile oluşturur, ardından bir act bloğunun içinde ref.current üzerinden yöntemleri çağırır ve ortaya çıkan davranışı veya DOM değişikliklerini doğrularsınız.

Dışa açılan kapsam küçük ve açık olduğundan, bu sınamalar odaklıdır; iç ayrıntıları incelemek yerine belgelenen her yöntemin sözleşmesinin gerektirdiği işi yapıp yapmadığını doğrular.

TypeScript'te tutamacı açıklayan bir arayüz tanımlarsınız; örneğin focus ve clear yöntemlerini içeren bir arayüz. Ardından bu arayüzü hem forwardRef genel türünü hem de üst bileşenin tuttuğu ref'i türlendirmek için kullanırsınız.

Bu, çağrı noktasında otomatik tamamlama ve derleme zamanı denetimleri sağlar; böylece kullanıcılara tam olarak hangi yöntemlerin var olduğunu gösterir ve yanlış kullanımları çalışma zamanından önce yakalar.

useImperativeHandle'ın aslında ne işe yaradığını doğrulayın.

useImperativeHandle, aktarılan bir ref'in neyi dışa açacağını özelleştirir; ref'i ve bir tutamaç nesnesi döndüren fabrika işlevini alır. Bunu focus ve clear gibi küçük bir programlama arayüzünü veya bir modal üzerinde open ve close işlemlerini dışa açmak için kullanırsınız.

Daima forwardRef ile birlikte kullanılır, tutamacı yenilemek için bir bağımlılık dizisini destekler ve TypeScript arayüzleri ile odaklı sınamalarla iyi çalışır. Sınırlı bir kapsam bilinçli bir tercihtir ve iyi tasarımdır.