Seçici kullanımı
- React kursu
- İleri seviye
- Ders 27/56
- 4 dk
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.
Başlangıç kodu
import { shallow } from 'zustand/shallow';
import { useCounter } from './useCounter';
// Counter bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 shallow ne zaman kullanılır?
Many values = shallow.- Tek bir değer okurken
- Yalnızca CSS yazarken
- Birden çok değer okurken Doğru cevap
- Yalnızca test sırasında
Açıklama: shallow birden çok değer için kullanılır.
2 shallow importu
import { ____ } from 'zustand/shallow';import { shallow } from 'zustand/shallow';Açıklama: shallow zustand/shallow'dan içe aktarılır.
3 Seçici kullanımı: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
shallow |
Karşılaştırıcı |
selector |
İlgili parça |
create |
Store kurar |
set |
State günceller |