Seçici kullanımı

Selector ile sadece gerekli state'i alıp çizimi azaltmayı öğrenirsin.

Shallow karşılaştırma

Birden çok değer okurken useStore'u selector ile çağırmak, her değişimde çizim tetikler. Bunu önlemek için shallow karşılaştırıcı kullanırsın.

import { shallow } from 'zustand/shallow' ile içe aktarır, useStore((s) => ({ a: s.a, b: s.b }), shallow) biçiminde çağırırsın. Bu, yalnızca a veya b değiştiğinde çizimi tetikler.

Shallow, nesnenin her alanını tek tek karşılaştırır; bu da referans değişse bile değer aynıysa çizimi önler.

Selector en iyi pratik

Selector, yalnızca gerçekten gereken en küçük parçayı döndürmeli. useStore((s) => s.user.name) yalnızca name'i okur; user değişse bile name aynıysa çizim olmaz.

Bu ince taneli selector, React'in yeniden çizim maliyetini ciddi azaltır; özellikle büyük listelerde fark yaratır.

Selector içinde yeni nesne üretmekten kaçın; her çağrıda yeni referans, çizimi her seferinde tetikler. Bu yüzden shallow kullanılır.

Uygulama İki değeri shallow oku

Aşağıdaki iskeleti tamamla. Counter bileşeni yaz. useCounter'ı (s) => ({ count: s.count, name: s.name }) selectorü ile ve shallow ile çağır. shallow'u 'zustand/shallow''tan içe aktar. <p>{name}: {count}</p> döndür. export default ekle.

Örnek çözümü göster

import { shallow } from 'zustand/shallow';
import { useCounter } from './useCounter';

function Counter() {
  const { count, name } = useCounter(
    (s) => ({ count: s.count, name: s.name }),
    shallow
  );
  return <p>{name}: {count}</p>;
}

export default Counter;

Kendini test et

shallow ne zaman kullanılır?
```
Many values = shallow.
```
- Tek bir değer okurken
- Yalnızca CSS yazarken
- Birden çok değer okurken
- Yalnızca test sırasında
Cevabı göster

Birden çok değer okurken — shallow birden çok değer için kullanılır.

shallow importu

import { ____ } from 'zustand/shallow';

Cevabı göster

import { shallow } from 'zustand/shallow';

Seçici kullanımı: kavramları eşleştir

shallow

Karşılaştırıcı
selector

İlgili parça
create

Store kurar
set

State günceller

Sıradaki ders: Özet - Zustand

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler