React'te yeniyseniz, React Hook'ların ne olduğunu ve bunları ne zaman kullanmanız gerektiğini merak ediyor olabilirsiniz. React, 16.8 sürümünde yalnızca kancaları tanıttı, ancak bunlar hızla kitaplığın temel bir özelliği haline geldi.
React Hooks'un temelleri hakkında her şeyi öğrenin ve bunları React uygulamalarınızda kullanmak için bazı en iyi uygulamaları keşfedin.
Tepki Kancaları Nedir?
React Hooks, ekstra kod yazmadan durum ve diğer React özelliklerini kullanmanıza izin verir. Kancalar, kodunuzu daha okunabilir ve bakım yapılabilir hale getirmenin harika bir yoludur.
birkaç tane var React'te farklı Kancalar, ancak en sık kullanılanlar useState ve useEffect'tir. useState kancası, bileşenlerinize durum eklemenizi sağlar. Bu, bir kullanıcının girişini veya bir formdaki değişiklikleri takip etmek gibi şeyler için kullanışlıdır. useEffect kancası, bir bileşen oluşturulduğunda bir işlevi çalıştırmanıza izin verir. Bu, bir API'den veri almak veya abonelik ayarlamak gibi şeyler için kullanışlıdır.
React Hooks'u Ne Zaman Kullanmalısınız?
Bir bileşene ekstra işlevsellik eklemeniz gerektiğinde React Hooks kullanmalısınız. Örneğin, bir kullanıcının girişini takip etmeniz gerekiyorsa, useState kancasını kullanırsınız. Bir API'den veri almanız gerekiyorsa, useEffect kancasını kullanırsınız. ayrıca yapabilirsin API çağrıları için özel kancalar oluşturun.
React'i yeni kullanmaya başladıysanız, henüz Hook'ları kullanmanız gerekmeyebilir. Ancak daha karmaşık uygulamalar oluştururken, Hook'ların bileşenlerinize ekstra işlevsellik eklemenin harika bir yolu olduğunu göreceksiniz.
React Hooks İle En İyi Uygulamalar
Artık React Hook'ların ne olduğunu ve ne zaman kullanılacağını öğrendiğinize göre, bazı en iyi uygulamalardan bahsedelim.
1. Yalnızca Tepki İşlevlerinden Çağrı Kancaları
React Hook'larını yalnızca React işlevlerinden çağırmalısınız. Bir sınıf bileşeninden tepki kancaları çağırmaya çalışırsanız, bir hata alırsınız.
Bunun nedeni, bir React Hook'u yalnızca bir React işlevinden çağırabilmenizdir. React işlevleri, bir function anahtar sözcüğüyle bildirdiğiniz bileşenlerdir.
İşte bir React fonksiyon bileşeni örneği:
içe aktarmak Tepki, { useState } itibaren 'tepki';işlevUygulama() {
sabit [sayım, setCount] = kullanımDevlet(0);
geri dönmek (
<div>
<P>{saymak}</P>
<düğme onClick={() => setCount (sayı + 1)}>
Beni tıkla
</button>
</div>
);
}
İşte bir sınıf bileşeni örneği:
içe aktarmak Tepki, { Bileşen } itibaren 'tepki';sınıfUygulamauzanırBileşen{
durum = {
sayım: 0
};
render() {
geri dönmek (
<div>
<P>{this.state.count}</P>
<düğme onClick={() => this.setState({ sayı: this.state.count + 1 })}>
Beni tıkla
</button>
</div>
);
}
}
İlk örnek, App bileşenini function anahtar sözcüğünü kullanarak bildirirken, ikincisi class anahtar sözcüğünü kullanır.
2. Yalnızca Bir useEffect Kancası Kullanın
useEffect kancasını kullanıyorsanız, bileşen başına yalnızca bir tane kullanmalısınız. Bunun nedeni, bir bileşen her oluşturulduğunda useEffect'in çalışmasıdır.
Birden çok useEffect kancanız varsa, bir bileşen oluşturulduğunda hepsi çalışır. Bu, beklenmeyen davranışlara ve performans sorunlarına yol açabilir. Aşağıdaki örnekte, App bileşeni her oluşturulduğunda her iki useEffects de çalışacaktır.
içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';işlevUygulama() {
sabit [sayım, setCount] = kullanımDevlet(0);useEffect(() => {
konsol.log('Bu, Uygulama bileşeni her oluşturulduğunda çalışır!');
}, []);useEffect(() => {
konsol.log('Bu, Uygulama bileşeni her oluşturulduğunda da çalışır!');
}, []);
geri dönmek (
<div>
<P>{saymak}</P>
<düğme onClick={() => setCount (sayı + 1)}>
Beni tıkla
</button>
</div>
);
}
Birden çok useEffect kancası kullanmak yerine, tek bir useEffect kancası kullanabilir ve tüm kodunuzu bunun içine koyabilirsiniz. Aşağıdaki örnekte, App bileşeni her oluşturulduğunda yalnızca bir useEffect kancası çalışacaktır.
içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';işlevUygulama() {
sabit [sayım, setCount] = kullanımDevlet(0);useEffect(() => {
konsol.log('Bu, Uygulama bileşeni her oluşturulduğunda çalışır!');
konsol.log('Bu, Uygulama bileşeni her oluşturulduğunda da çalışır!');
}, []);
geri dönmek (
<div>
<P>{saymak}</P>
<düğme onClick={() => setCount (sayı + 1)}>
Beni tıkla
</button>
</div>
);
}
Bu, yalnızca ilk örnekten React Hooks çağırabileceğiniz anlamına gelir. İkinci örnekten React Hooks'u çağırmaya çalışırsanız bir hata alırsınız.
3. Kancaları Üst Düzeyde Kullanın
React Hooks ile ilgili en iyi uygulamalardan biri, onları en üst düzeyde kullanmaktır. Döngüler, koşullar veya iç içe geçmiş işlevler içinde kanca kullanmaktan kaçınmalısınız. Örneğin, State'i bir for döngüsü içinde kullanırsanız, döngü her çalıştığında React yeni bir durum değişkeni oluşturur. Bu beklenmedik davranışlara yol açabilir.
içe aktarmak Tepki, { useState } itibaren 'tepki';işlevUygulama() {
için (izin vermek ben = 0; ben < 10; ben++) {
// Bunu yapma!
sabit [sayım, setCount] = kullanımDevlet(0);
}
geri dönmek (
<div>
<P>{saymak}</P>
<düğme onClick={() => setCount (sayı + 1)}>
Beni tıkla
</button>
</div>
);
}
Yukarıdaki örnekte, Uygulama bileşeni yalnızca döngünün son yinelemesinden itibaren sayımı ve düğmeyi oluşturacaktır. Bunun nedeni, React'in yalnızca son yinelemedeki durum değişkenini güncellemesidir.
Bir döngü içinde usingState yerine, döngünün dışında bir durum değişkeni bildirebilirsiniz. Bu şekilde, React yalnızca bir durum değişkeni oluşturacak ve buna göre güncelleyecektir.
içe aktarmak Tepki, { useState } itibaren 'tepki';işlevUygulama() {
// UseState'i bir döngü içinde kullanmanın doğru yolu budur
sabit [sayım, setCount] = kullanımDevlet(0);için (izin vermek ben = 0; ben < 10; ben++) {
// ...
}
geri dönmek (
<div>
<P>{saymak}</P>
<düğme onClick={() => setCount (sayı + 1)}>
Beni tıkla
</button>
</div>
);
}
4. Kancaları Aşırı Kullanmayın
React Hooks güçlü bir araçtır, ancak bunları aşırı kullanmaktan kaçınmalısınız. Kendinizi her bileşende birden çok Hook kullanırken bulursanız, bunları aşırı kullanıyor olabilirsiniz.
React Hooks, durumu birden çok bileşen arasında paylaşmanız gerektiğinde en kullanışlıdır. Gereksiz Hook'ları kullanmaktan kaçının çünkü bunlar kodunuzun okunmasını zorlaştırabilir ve aşırı kullanıldıklarında performansı etkileyebilir.
React 18 Hooks Kullanarak Daha Fazla İşlevsellik Ekleyin
React 18'in piyasaya sürülmesiyle birlikte yeni kancalar mevcut. Her kanca belirli bir React özelliğine özeldir. Mevcut tüm kancaların bir listesini React web sitesinde bulabilirsiniz. Ancak en sık kullanılan kancalar hala useState ve useEffect'tir.