0Pricing
React Academy · Ders

HOC ve Render Props ve Özel Hook'lar

Üç kod paylaşma stratejisini okunabilirlik, test etme ve bileşim açısından karşılaştırın.

HOC ve Render Props ve Özel Hook'lar, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste HOC'leri, oluşturma özelliklerini ve özel kancaları okunabilirlik, sınanabilirlik, birleştirilebilirlik ve her birinin ne zaman doğru araç olduğu açısından karşılaştıracaksınız.

Üçünün de Çözdüğü Sorun

Bu üç desenin tümü, kodu kopyalayıp yapıştırmadan birden çok bileşen arasında durum bilgisi içeren mantığı veya davranışı paylaşmak için vardır.

HOC: Avantajları

HOC'ler sınıf bileşenleriyle (kancalardan önce) çalışır, kancaları desteklemeyen kitaplıklarla sorunsuz bütünleşir ve sarmalanmış bileşenin kaynak kodunu değiştirmeden saydam biçimde uygulanabilir.

HOC: Dezavantajları

HOC'ler DevTools'ta sarmalayıcı cehennemi oluşturur, iki HOC aynı özellik adını eklerse özellik çakışmalarına yol açabilir ve TypeScript'te doğru biçimde türlendirilmesi daha zordur. Başvuruların açıkça iletilmesi gerekir.

Oluşturma Özellikleri: Avantajları

Oluşturma özellikleri veri akışını açık hâle getirir; davranış sağlayıcısının hangi değerleri sunduğunu tam olarak görebilirsiniz. Hem sınıf hem de işlev bileşenlerinde çalışır ve başsız bileşen arayüzleri için harikadır.

Oluşturma Özellikleri: Dezavantajları

İç içe oluşturma özelliği geri çağrıları "geri çağrı cehennemi" oluşturur. Satır içi oluşturma özelliği işlevleri önbelleklemeyi bozar. Basit bir kanca çağrısına kıyasla görsel gürültü eklerler.

Özel Kancalar: Avantajları

Özel kancalar en kolay birleştirilebilen seçenektir: birden çok kanca çağırabilir, bunları birleştirebilir ve bileşenin JSX'ini temiz tutabilirsiniz. Yalıtılmış olarak sınanmaları kolaydır. TypeScript türleri anlaşılırdır.
const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

Özel Kancalar: Dezavantajları

Özel kancalar yalnızca işlev bileşenlerinde çalışır (sınıf bileşenlerinde çalışmaz). JSX ekleyemezler; yalnızca veri ve işlev döndürürler. Kimlik doğrulama korumaları gibi bazı kullanım alanlarında HOC'lere veya sarmalayıcı bileşenlere ihtiyaç duyulur.

Karar Rehberi

Bir rotayı yönlendirmeniz veya korumanız mı gerekiyor? HOC ya da sarmalayıcı bileşen kullanın. Başsız bir kullanıcı arayüzü kitaplığı mı oluşturuyorsunuz? Oluşturma özelliklerini veya kancaları kullanın. İşlev bileşenlerinde durum bilgisi içeren mantığı mı paylaşıyorsunuz? Özel kanca kullanın. Bir sınıf bileşenini veya üçüncü taraf bir bileşeni mi sarmalıyorsunuz? HOC kullanın.

Modern Varsayılan: Önce Kancalar

Modern bir React kod tabanında (tüm bileşenler işlev bileşeniyse) varsayılan seçim özel kancalardır. Yalnızca kancalar sorunu çözemediğinde HOC'lere veya oluşturma özelliklerine başvurun.

Hızlı Kontrol

Modern React işlev bileşenlerinde durum bilgisi içeren mantığı çıkarmak için önerilen varsayılan kod paylaşma deseni hangisidir?

Özet

HOC'ler, oluşturma özellikleri ve özel kancalar mantığı paylaşır. Kancalar modern varsayılandır: temiz, birleştirilebilir ve sınanabilirdir. HOC'ler sınıf bileşenleri ve rota korumaları içindir. Oluşturma özellikleri başsız kullanıcı arayüzleri içindir. Seçiminizi bağlama göre yapın.

Sırada

Sıradaki ders: **Bir HOC'yi Özel Kancaya Yeniden Düzenleme** — withAuth HOC'sini adım adım useAuth kancasına dönüştüreceksiniz.

Sıkça Sorulan Sorular

“HOC ve Render Props ve Özel Hook'lar” dersi ücretsiz mi?

Evet — “HOC ve Render Props ve Özel Hook'lar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“HOC ve Render Props ve Özel Hook'lar” dersinde ne öğreneceğim?

Üç kod paylaşma stratejisini okunabilirlik, test etme ve bileşim açısından karşılaştırın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“HOC ve Render Props ve Özel Hook'lar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Render Props Deseni
  2. Üst Düzey Bileşenler (HOC'lar) Açıklaması
  3. HOC ve Render Props ve Özel Hook'lar
  4. HOC'yi Özel Hook'a Yeniden Düzenleme
← React Academy Sayfasına Dön