React Academy · Ders

Context Seçici Deseni

Yalnızca context'in bir bölümü değiştiğinde yeniden oluşturulan basit bir seçici hook'u uygulayın.

Context Seçici Deseni, 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, bir bileşeni yalnızca context durumunun bir parçasına abone eden ve context'in ilgisiz bölümleri değiştiğinde yeniden oluşturulmasını önleyen bir context seçici kancası uygulayacaksınız.

Seçici Sorunu

useContext, context'in ANY bölümü değiştiğinde yeniden oluşturmaya neden olur. Bir bileşenin yalnızca kullanıcının adına ihtiyacı varsa ancak context'te bir bildirim listesi de bulunuyorsa, bildirim eklenmesi ad bileşenini gereksiz yere yeniden oluşturur.

Seçici Nedir?

Seçici, daha büyük bir durum nesnesinden belirli bir durum parçasını çıkaran işlevdir: `state => state.user.name`. Seçici kancası context'e abone olur, ancak yalnızca seçilen değer değiştiğinde yeniden oluşturmayı tetikler.

Basit Seçici Kancası

Context'i okuyan ve sonucu seçiciye göre useMemo ile saran bir useSelector kancası oluşturun. Bileşen yalnızca seçilen değer değiştiğinde yeniden oluşturulur.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Sığ Eşitlik Denetimi

Seçici kullanan useMemo, seçici her çağrıldığında yeni bir nesne/dizi başvurusu döndürürse yine yeniden oluşturmaya neden olur (örneğin `s => s.items.filter(...)`). İçerik aynı olduğunda yeniden oluşturmaları atlamak için sığ eşitlik karşılaştırması kullanın.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

use-context-selector Kitaplığı

Üretim kullanımı için **use-context-selector** kitaplığı, harici durum yöneticilerine gerek kalmadan verimli abonelik ve eşitlik denetimleri sağlayan bir useContextSelector kancaları sunar.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Seçiciye Özgü Çözüm Olarak Zustand

Zustand'ın `useStore(selector)` kancası, kullanıma hazır sığ eşitlik özelliğiyle yerleşik seçici desteğine sahiptir. Bu da onu, ayrıntılı aboneliklerin önemli olduğu büyük durum ağaçları için doğal bir seçenek hâline getirir.

const name = useAppStore(state => state.user.name);

Seçicilerin Gereğinden Fazla Olduğu Durumlar

Context güncellemeleri seyrekse ve tüketicilerin yeniden oluşturulması düşük maliyetliyse seçiciler ölçülebilir bir yarar sağlamadan karmaşıklık ekler. Önce profil oluşturun; her zaman kanıta dayalı olarak iyileştirme yapın.

Seçici İşlevlerini Önbelleğe Alma

Seçiciyi bileşen gövdesinin içinde satır içi olarak oluşturursanız her yeniden oluşturmada yeni bir işlev başvurusu elde edilir ve bu durum önbelleğe almayı bozabilir. Seçicileri bileşenin dışında tanımlayın veya useCallback kullanın.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Türetilmiş Seçiciler

Bir seçiciyi başka bir seçicinin içinden çağırarak seçicileri birleştirin. Türetilmiş seçiciler, değerleri temel seçicilerden hesaplayarak iş mantığını bileşenlerin dışında tutar.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Hızlı Kontrol

useContextSelector veya useMemo ile kullanıldığında seçici işlevleri neden bileşen gövdesinin dışında tanımlanmalıdır?

Özet

Seçiciler context durumunun bir parçasını çıkarır ve ilgisiz bölümler değiştiğinde yeniden oluşturulmaları önler. Kararlı başvurular için seçicileri bileşenlerin dışında tanımlayın. Üretim düzeyinde seçici desteği için use-context-selector veya Zustand kullanın.

Sırada

Sıradaki ders: **Context Ne Zaman Kullanılmamalı** — özellik geçirme, bileşim veya bir durum yöneticisinin Context'ten daha uygun ve basit olduğu durumları tanımayı öğreneceksiniz.

Sıkça Sorulan Sorular

“Context Seçici Deseni” dersi ücretsiz mi?

Evet — “Context Seçici Deseni” 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.

“Context Seçici Deseni” dersinde ne öğreneceğim?

Yalnızca context'in bir bölümü değiştiğinde yeniden oluşturulan basit bir seçici hook'u uygulayı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.

“Context Seçici Deseni” 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

← React Academy Sayfasına Dön