Hook kompozisyonu
- React Native kursu
- Orta seviye
- Ders 11/116
- 5 dk
Hook'ları birleştirmeyi öğrenirsin.
Hook kompozisyonu nedir?
Hook kompozisyonu birden çok hook'u tek bir özel hook içinde birleştirmektir. Böylece karmaşık mantık tek bir çağrıda gizlenir; bileşenler sade kalır. Özel hook'lar da başka hook'ları çağırabildiği için bu doğal bir yaklaşımdır.
Örnek: useUserStatus adında bir hook, useToggle ve useCounter'ı birleştirip kullanıcı çevrimiçi sayısını ve menü durumunu tek seferde yönetebilir. Bileşen yalnızca const [count, toggle] = useUserStatus() yazar; ayrıntılar arkada kalır. Bu, büyük uygulamalarda yeniden kullanılabilirliği artırır.
Kompozisyon örneği
Bir useGameScore hook'u hem useCounter hem usePrevious'ı birleştirebilir. Skor artırılırken eski skor da gösterilir; böylece oyuncu son hamlenin getirisini görür. Bileşen yalnızca const [score, increment, prev] = useGameScore() yazar.
Kompozisyon yaparken her bir alt hook'un bağımsız çalışabildiğinden emin olmalısın. Hook'lar arasında state paylaşımı gerekirse bunu parametre ve dönüş değeriyle yap; doğrudan dışarıdan değer atamaktan kaçın. Bu yaklaşım hem test kolaylığı hem de yeniden kullanılabilirlik sağlar.
Uygulama İki hook'u birleştir
useScoreWithPrev özel hook'unu yaz. İçinde useCounter(0) ve usePrevious(count)'i çağır. Hook [count, increment, prev] döndürsün.
Başlangıç kodu
// useCounter ve usePrevious'ı içe aktar
// useScoreWithPrev özel hook'unu yaz
// useCounter ile count ve increment al
// usePrevious ile prev al
// [count, increment, prev] döndürÖrnek çözüm
import { useCounter, usePrevious } from "./hooks";
function useScoreWithPrev() {
const [count, increment] = useCounter(0);
const prev = usePrevious(count);
return [count, increment, prev];
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hook'u çağır
function useFeature() {
const [count, increment] = ____(0);
return [count, increment];
}function useFeature() {
const [count, increment] = useCounter(0);
return [count, increment];
}Açıklama: useCounter çağrısı ile değerler alınır.
2 Kompozisyon senaryosu
| Kavram | Anlamı |
|---|---|
useCounter |
Skor artırır |
usePrevious |
Eski skoru verir |
useToggle |
Menüyü açar |
useGameScore |
Üçünü birleştirir |
3 Kompozisyon ne kazandırır?
function useGameScore() {
const [score] = useCounter(0);
const prev = usePrevious(score);
return [score, prev];
}- Daha yavaş çalışmayı
- Daha az yeniden kullanılabilirliği
- Tek çağrıda çok mantık Doğru cevap
- Daha uzun bileşenleri
Açıklama: Kompozisyon tek çağrıda çok mantık sunar.