React Academy · Ders

Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme

Bileşenlerin yalnızca gerektiğinde yeniden oluşturulması için seçiciler aracılığıyla belirli durum bölümlerini ayıklayın.

2. ders / 413 adım

Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme, CoddyKit'te ücretsiz bir React 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, 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, bileşenleri yalnızca ihtiyaç duydukları durum parçalarına abone etmek için Zustand seçicilerini kullanacak ve store'un diğer bölümleri değiştiğinde gereksiz yeniden oluşturmayı önleyeceksiniz.

Varsayılan Seçici Sorunu

Store kancasını seçici olmadan çağırmak, store nesnesinin tamamını döndürür. Bileşen, ilgisiz durum değişiklikleri de dahil olmak üzere EVERY store değişikliğinde yeniden oluşturulur.
// Bad: re-renders on every store change
const store = useAppStore();
return <p>{store.user.name}</p>;

Seçici Kullanma

Store kancasına bir seçici işlevi aktarın. Bileşen yalnızca seçicinin döndürdüğü değer değiştiğinde yeniden oluşturulur.
// Good: re-renders only when user.name changes
const name = useAppStore(s => s.user.name);
return <p>{name}</p>;

Başvuru Eşitliği Denetimi

Zustand varsayılan olarak katı eşitlik (===) kullanır. Seçiciniz her çağrıda yeni bir nesne veya dizi döndürürse içerik aynı olsa bile bileşen yeniden oluşturulur.
// Creates a new object every time — always re-renders!
const info = useStore(s => ({ id: s.id, name: s.name }));

Sığ Eşitlikle Düzeltme

`shallow` öğesini zustand'dan içe aktarın ve nesne içerikleri aynı olduğunda yeniden oluşturmayı önlemek için eşitlik işlevi olarak aktarın.
import { shallow } from 'zustand/shallow';

const info = useAppStore(
  s => ({ id: s.id, name: s.name }),
  shallow // compare by content, not reference
);

Birden Çok Değer Seçme

Gereksiz yeniden oluşturmalar oluşturmadan aynı anda birden çok değer seçmek için sığ eşitlik desenini kullanın.
const { items, loading } = useCartStore(
  s => ({ items: s.items, loading: s.loading }),
  shallow
);

Kararlı Eylem Başvuruları

Zustand'daki eylemlerin (işlevlerin) başvuruları kararlıdır; durum güncellendiğinde değişmezler. Bunları shallow kullanmadan seçebilirsiniz ve yeniden oluşturmaya neden olmazlar.
// Actions are always stable — no shallow needed
const addToCart = useCartStore(s => s.addToCart);

useShallow Yardımcısı (Zustand v5+)

Zustand v5, seçiciyi otomatik olarak sığ eşitlikle saran ve kodu daha temiz hâle getiren bir useShallow yardımcı programı sağlar.
import { useShallow } from 'zustand/react/shallow';

const { items, loading } = useCartStore(
  useShallow(s => ({ items: s.items, loading: s.loading }))
);

Seçicileri Birleştirme

Türetilmiş durumu store'da saklamaktan kaçınmak için hesaplanan değerleri seçicilerin içinde türetin. Toplamları, filtrelenmiş listeleri veya biçimlendirilmiş dizeleri seçicinin içinde hesaplayın.
const totalPrice = useCartStore(
  s => s.items.reduce((sum, item) => sum + item.price, 0)
);

Zustand Yeniden Oluşturmalarını Profilleme

Seçicilerinizin çalıştığını doğrulamak için React DevTools Profiler'ı kullanın. Store'a ilgisiz bir öğe ekledikten sonra yalnızca ad seçicisini kullanan bileşenin commit alev grafiğinde görünmediğini kontrol edin.

Hızlı Kontrol

Bir Zustand seçicisi nesne döndürdüğünde neden sığ eşitlik kullanmanız gerekir?

Özet

Her zaman belirli seçiciler kullanın. Bir nesne olarak birden çok değer seçerken sığ eşitlik kullanın. Hesaplanan değerleri seçicilerin içinde türetin. Eylemlerin başvuruları kararlıdır ve shallow kullanmaları gerekmez.

Sırada

Sonraki ders: **Persist Ara Yazılımıyla Durumu Kalıcı Hâle Getirme** — persist ara yazılımını kullanarak Zustand durumunu localStorage ile eşitleyeceksiniz.
Başlamak ücretsiz

Yapay zeka eğitmeniyle React öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
88
Dersler
324

Sıkça Sorulan Sorular

“Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme” dersi ücretsiz mi?

Evet — “Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme” 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.

“Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme” dersinde ne öğreneceğim?

Bileşenlerin yalnızca gerektiğinde yeniden oluşturulması için seçiciler aracılığıyla belirli durum bölümlerini ayıklayı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 2. dersidir.

“Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme” 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. İlk Zustand Store'unuzu Oluşturma
  2. Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme
  3. Persist Middleware ile Durumu Kalıcı Hâle Getirme
  4. Zustand DevTools ve Store'ları Test Etme
← React Academy Sayfasına Dön