React kancalarını ve hatta çerçevenin sunduğu temel kancaları zaten biliyor olabilirsiniz. Kancalar, bir sınıf yazmak zorunda kalmadan durumu ve diğer özellikleri yönetmenize izin verir. Temel kancalar Kullanım Durumu, kullanım Etkisi, ve kullanımBağlam. Bu makalede, daha karmaşık davranışlar ekleyen bazı ek kancalar hakkında bilgi edineceksiniz.

Öğreneceğiniz ek kancalar kullanımRef ve not kullan.

kullanımRef

NS kullanımRef işlev, değiştirilebilir bir ref nesnesi döndürür ve .akım geçirilen argümanın özelliği. İnsanlar genellikle kullanımını karıştırır kullanımRef kanca ile Kullanım Durumu kanca. Bu kancaya bir referansın referansını tutmasını söyleyebilirsiniz. HTML öğesi. Bu referansı kullanarak, o öğeyi kolayca değiştirebilirsiniz.

NS kullanımRef kancanın içinde yalnızca bir özellik vardır: .akım. React, öğesi değiştiğinde sayfayı yeniden oluşturmaz. değerini değiştirirseniz yeniden oluşturmaz.akım Emlak. Bu kancanın kullanımını bir örnekle anlayalım:

React, { useState, useRef } öğesini 'react' öğesinden içe aktarın;





instagram viewer


varsayılan işlevi dışa aktar App() {
const sayısı = useRef (boş);
const [sayı, setNumber] = useState (0);
const checkNumber = () => {
if (sayım.akım.değer < 10) {
count.current.style.backgroundColor = "kırmızı";
} Başka {
count.current.style.backgroundColor = "yeşil";
}
};
dönüş (


10'dan büyük bir sayı girin

başvuru={sayım}
tür = "metin"
değer={sayı}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Tıklayın



);
}

Yukarıdaki kodda, girdi kutusuna girdiğiniz sayıya göre girdi öğesinin rengi değişmektedir. İlk olarak, sonucu atar kullanımRef() kanca saymak değişken. İki öğe vardır: giriş ve düğme. Giriş öğesi, sayı ve referans giriş etiketinin özelliği saymak değişkeni eşleştirmek için.

Düğmeye tıkladığınızda, numaraya bak() fonksiyon çağrılır. Bu fonksiyon, değerin olup olmadığını kontrol eder. sayı 10'dan büyüktür. o zaman arka plan rengini ayarlar kullanarak giriş elemanının say.current.style.backgroundColor Emlak.

İlgili: CSS Temelleri: Renklerle Çalışmak

not kullan

UseMemo kancası, bağımlılıklarından herhangi biri değiştiğinde önbelleğe alınmış bir değeri yeniden hesaplayacaktır. Bu optimizasyon, her işlemede pahalı hesaplamalardan kaçınmaya yardımcı olur.

sözdizimi not kullan kanca aşağıdaki gibidir:

const memoizedValue = useMemo(() => hesaplamaExpensiveValue (a), [a]);

Daha iyi anlamak için bir örnek düşünelim. Aşağıdaki kod, iki başlığın renklerini değiştirir. Şunu çağırır: Kullanım Durumu değerlerini takip etmek için kanca. Bir fonksiyon rengin değerine göre sıcak mı yoksa soğuk mu olduğunu gösterir. Rengin durumuna dönmeden önce, yaklaşık bir saniye duraklayan bir while döngüsü vardır. Bu, tanıtım amaçlıdır, ürünün faydasını açıklamak için not kullan kanca.

React, { useState, useMemo } öğesini 'tepkiden' içe aktarın;
varsayılan işlevi dışa aktar App() {
const [color1, setColor1] = useState("mavi");
const [color2, setColor2] = useState("green");
const toggleColor1 = () => {
dönüş color1 "mavi"? setColor1("kırmızı"): setColor1("mavi");
};
const toggleColor2 = () => {
color2 "yeşil"? setColor2("turuncu"): setColor2("yeşil");
};
const displayColor = () => {
var şimdi = new Date().getTime();
while (new Date().getTime() < şimdi + 1000);
dönüş color1 "mavi"? "cool": "sıcak";
};
dönüş (


Metin 1 rengi: {color1}

{displayColor()} renk

Rengi Aç/Kapat
Metin 2 rengi: {color2}

Rengi Aç/Kapat



);
}

üzerine tıkladığınızda toggleButton1, durum değişirken hafif bir gecikme fark etmelisiniz. Tıkladığınızda da bir gecikme olduğuna dikkat edin. toggleButton2. Ancak bu olmamalı, çünkü bir saniyelik duraklama ekranRenk. Bu sayfada, düğmeler bağımsız hareket edebilmelidir. Bunu başarmak için şunları kullanabilirsiniz: not kullan kanca.

sarmanız gerekir ekranRenk içinde işlev not kullan kanca ve geçiş renk1 bağımlılık dizisinde.

const displayColor = useMemo(() => {
var şimdi = new Date().getTime();
while (new Date().getTime() < şimdi + 1000);
dönüş color1 "mavi"? "cool": "sıcak";
}, [renk1]);

NS not kullan kanca bir işlevi ve bağımlılıkları parametre olarak alır. NS not kullan kanca yalnızca bağımlılıklarından biri değiştiğinde işleyecektir. Bir API'den getirmeniz gereken durumlarda kullanışlıdır.

Kancaları Öğrendikten Sonra Ne Yapmalı?

Kancalar çok güçlü bir özelliktir ve React projelerinde yaygın olarak kullanılır. Optimizasyon için çok fazla potansiyel sağlarlar. Formlar veya saat sayaçları gibi küçük projeler oluşturarak kanca alıştırmaları yapabilirsiniz.

Gibi başka gelişmiş kancalar var kullanımRedüktör, kullanımLayoutEffect, ve useDebugValue. Bunları resmi React belgelerine başvurarak öğrenebilirsiniz.

Unnati Bamania (10 Makale Yayınlandı)

Unnati, hevesli bir tam yığın geliştiricidir. Çeşitli programlama dillerini kullanarak projeler oluşturmayı seviyor. Boş zamanlarında gitar çalmayı çok seviyor ve yemek yapmayı çok seviyor.

Unnati Bamania'dan Daha Fazla