0Pricing
Frontend Academy · Ders

Render Özellikleri ve HOC Kalıpları

Arayüz eklemek için bir işleme işlevini özellik olarak aktarmayı ve özgün bileşeni değiştirmeden davranış eklemek üzere bileşenleri Yüksek Dereceli Bileşenlerle sarmalamayı öğrenin.

Render Özellikleri ve HOC Kalıpları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

İki Klasik Yeniden Kullanım Kalıbı

Kancalardan önce (React 16.8), durum içeren mantığı yeniden kullanmak ya Üst Düzey Bileşenler (HOC'ler) ya da oluşturma özellikleri anlamına geliyordu. Yeni kodlarda bunlara nadiren rastlanır; ancak eski kod tabanlarında ve birçok kütüphanede hâlâ karşınıza çıkar.

Oluşturma Özellikleri — Fikir

Bir bileşen, özellik olarak bir işlev kabul eder (genellikle render veya children adı verilir) ve bu işlevi kendi iç durumuyla çağırır. Tüketici, bu durumla ne oluşturulacağına karar verir.

function Mouse({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return render(pos);
}

// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />

İşlev Olarak children

children özelliği de bir işlev olabilir; aynı kalıptır ve daha temiz JSX sağlar.

function Mouse({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  /* ... */
  return children(pos);
}

<Mouse>
  {({ x, y }) => <p>{x}, {y}</p>}
</Mouse>

Üst Düzey Bileşenler — Fikir

HOC, bir bileşen alan ve ek özelliklere veya davranışa sahip yeni bir bileşen döndüren işlevdir. Redux'un connect() ve React Router'ın withRouter() işlevlerinde yoğun olarak kullanılmıştır.

function withMouse(Component) {
  return function WithMouse(props) {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handler);
      return () => window.removeEventListener('mousemove', handler);
    }, []);
    return <Component {...props} mouse={pos} />;
  };
}

// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />

HOC'ler Sarmalayarak Birleşir

HOC'leri üst üste ekleyebilirsiniz; ancak bu, hata ayıklaması zor olan bir “sarmalayıcı cehennemi” oluşturur.

// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)

Oluşturma Özellikleri ve HOC

Oluşturma özellikleri daha açık ve tür dostudur; ad çakışmaları oluşturmaz. HOC'ler daha bildirimseldir; dikkat edilmezse sarmalanan bileşenlerdeki statik türler kaybolabilir ve özellik adlarında çakışmalar oluşabilir.

Kancalar Neden İkisinin de Yerini Aldı

Özel kancalar aynı amacı daha az törensel kodla gerçekleştirir: sarmalayıcı bileşenler, iç içe işlev bağımsız değişkenleri ve karmaşık tür işlemleri gerekmez. Kancalar, 2025 için deyimsel yaklaşımdır.

// Custom hook equivalent of useMouse:
function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

// Usage:
const { x, y } = useMouse();

Oluşturma Özelliklerinin Hâlâ Öne Çıktığı Durumlar

Yalnızca durum değil, işaretleme de eklemesi gereken bileşenlerde — örneğin öğeleri belirli konumlarda oluşturan sanallaştırılmış listelerde — oluşturma özellikleri hâlâ en doğal seçenektir.

function VirtualList({ items, itemHeight, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const start = Math.floor(scrollTop / itemHeight);
  const visible = items.slice(start, start + 20);
  return visible.map((item, i) => renderItem(item, start + i));
}

<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
  <Row key={i} data={item} />
)} />

HOC İçin En İyi Uygulamalar (Gerektiğinde)

Bir HOC yazmanız gerekiyorsa statik yöntemleri kopyalayın (hoist-non-react-statics), başvuruları iletin (React.forwardRef) ve DevTools için displayName değerini koruyun.

HOC'lerde Başvuruları İletme

HOC'ler başvuruları varsayılan olarak gizler; tüketicilerin temel bileşenin başvurusuna erişmeye devam edebilmesi için forwardRef kullanın.

function withLogger(Component) {
  const Wrapped = React.forwardRef((props, ref) => {
    console.log('rendering', Component.name);
    return <Component {...props} ref={ref} />;
  });
  Wrapped.displayName = `withLogger(${Component.name})`;
  return Wrapped;
}

Eski Kalıpları Tanıma

HOC'ler ve oluşturma özellikleri şu yerlerde karşınıza çıkar: react-redux (eski API), Apollo Client v2, react-router v5 (withRouter), Formik (Field), styled-components (withTheme). Bu kütüphanelerin daha yeni API'leri izin verdiğinde kancalara geçiş yapın.

Hızlı Kontrol

Kancalar, React bileşenleri arasında durum içeren mantığı paylaşmak için hangi kalıbın büyük ölçüde yerini almıştır?

Özet: Oluşturma Özellikleri ve HOC'ler

Oluşturma özellikleri, JSX döndüren işlev olarak özellik yaklaşımıdır; açıktır ve tür dostudur. HOC'ler, bir bileşeni sarmalayan işlevlerdir ve eski kütüphaneler tarafından (connect, withRouter) kullanılır. Özel kancalar, durum mantığı için her ikisinin de yerini almıştır. Özel işaretleme eklemeniz gerektiğinde (sanallaştırılmış listelerde) oluşturma özellikleri hâlâ öne çıkar. HOC yazarken forwardRef kullanın, statik özellikleri taşıyın ve displayName değerini ayarlayın.

Sıkça Sorulan Sorular

“Render Özellikleri ve HOC Kalıpları” dersi ücretsiz mi?

Evet — “Render Özellikleri ve HOC Kalıpları” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Render Özellikleri ve HOC Kalıpları” dersinde ne öğreneceğim?

Arayüz eklemek için bir işleme işlevini özellik olarak aktarmayı ve özgün bileşeni değiştirmeden davranış eklemek üzere bileşenleri Yüksek Dereceli Bileşenlerle sarmalamayı öğrenin. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 2. dersidir.

“Render Özellikleri ve HOC Kalıpları” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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. Context ile Birleşik Bileşenler
  2. Render Özellikleri ve HOC Kalıpları
  3. Modallar ve Araç İpuçları için Portallar
  4. Hata Sınırları
← Frontend Academy Sayfasına Dön