Hook kompozisyonu

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.

Örnek çözümü göster

import { useCounter, usePrevious } from "./hooks";

function useScoreWithPrev() {
  const [count, increment] = useCounter(0);
  const prev = usePrevious(count);
  return [count, increment, prev];
}

Kendini test et

Hook'u çağır

function useFeature() {
  const [count, increment] = ____(0);
  return [count, increment];
}

Cevabı göster

function useFeature() {
  const [count, increment] = useCounter(0);
  return [count, increment];
}

Kompozisyon senaryosu

useCounter

Skor artırır
usePrevious

Eski skoru verir
useToggle

Menüyü açar
useGameScore

Üçünü birleştirir
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
- Daha uzun bileşenleri
Cevabı göster

Tek çağrıda çok mantık — Kompozisyon tek çağrıda çok mantık sunar.

Sıradaki ders: Özet - Özel hook'lar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler