React'te useRef Hook Kullanımının Pratik Örneği

useRefReact'teki kanca hakkında hızlı bir açıklama .

Bu makale, bazen bazı geliştiricilerin, özellikle de yeni olanların React ile kafasını karıştıran bir konuyu açıklayacaktır.

Bu kancanın nasıl çalıştığı hakkında net bir fikriniz yoksa useRef kancası? Ne zaman kullanmak zorundasın? bu yazı işinize yarayacaktır.

kullanımRef Kancası

useRefBir argüman alıp bir özelliği olan bir nesne döndürebilir bir işlevdir currentatanmış değeri ile.

Ya bu değeri değiştirmek istersem? Sadece aşağıdaki gibi yazın val.current = “bar"ve değer değişebilir çünkü useRefdeğişkendir, yani herhangi bir değerle, ayrıca düğümler ve DOM öğeleriyle değer olarak atanabilir.

Şimdi değer var.currentdeğişti, ancak bileşen hala aynı olacak çünkü bu, useRefbileşeni yeniden oluşturmaz, ancak değerini yazdıralım var.current.

Değer değişti ancak bileşene yansıtılmadı. Bu kullanışlı bir özelliktir çünkü bileşeni yeniden oluşturmadan DOM öğelerindeki bileşenin veya özelliklerin değerlerini değiştirebiliriz.

DOM'daki öğelere erişim

Kullanmanın en yaygın yolu useRefDOM öğelerine erişmektir. Bunu yapmanın yolu ref, DOM öğesine bir özellik eklemektir .

Bunu yaparak, with val.currentöğesinin bir öğesini elde etmekle aynı şekilde olan öğeye erişebilir ve özelliklerini değiştirebiliriz getElementById.

Yukarıdaki kodda, click olayında metni 'Hola Mundo'ya ve arka planı kırmızıya çeviren bir işlevi tetikleyen bir düğme ekliyorum.

Öğeyi yeniden oluşturmadan mükemmel bir şekilde çalışır.

Sonuçlar

useRefKanca, görebileceğiniz gibi bizim uygulama performansını ve etkileşim iyileştirmeye yönelik bileşende karmaşık işlem gerçekleştirilirken verir. Umarım bu makaleyi faydalı bulmuşsunuzdur. Okuduğunuz için teşekkürler.

Daha fazla bilgi edin