Pahalı hesap
- React kursu
- Orta seviye
- Ders 34/80
- 5 dk
useMemo ile pahalı bir istatistik hesabını sararsın.
Pahalı hesap
Bu ders StatsPanel bileşenini yazacak. numbers dizisinden toplam, ortalama ve medyan hesaplanır. useMemo ile önbelleğe alınır; numbers değişmedikçe yeniden hesap yapılmaz.
Medyan hesabı pahalıdır: dizi sıralanır, orta değer alınır. 1000 öğeli bir dizide her render'da yapmak yavaş olabilir. useMemo bu yükü azaltır.
Panel her açıldığında yalnızca bir kez hesap yapılır; numbers güncellenince yeniden yapılır. Bu, akıcı kullanıcı deneyimi sağlar.
Üç hesap
Panel içinde üç hesap vardır: sum (toplam), avg (ortalama), median (medyan). Üçü de useMemo ile tek bir nesne olarak hesaplanır.
Yazım: const stats = useMemo(() => { const sum = ...; const avg = ...; const sorted = [...numbers].sort(...); const median = sorted[Math.floor(sorted.length / 2)]; return { '{ sum, avg, median }' }; }, [numbers]).
Tek bir useMemo ile tüm hesap bir arada tutulur; numbers değiştiğinde tümü yeniden yapılır. Bu, tutarlılığı korur ve kodu okunaklı kılar.
Uygulama StatsPanel yaz
Aşağıdaki iskeleti tamamla. StatsPanel bileşeni yaz. ({ '{ numbers }' }) alsın. stats'ı useMemo(() => { const sum = numbers.reduce((a, b) => a + b, 0); const avg = sum / numbers.length; return { '{ sum, avg }' }; }, [numbers]) ile hesapla. <p>{ '{ stats.sum }' } / { '{ stats.avg }' }</p> göster. Dışa aktar.
Başlangıç kodu
import { useMemo } from "react";
// StatsPanel bileşenini buraya yazÖrnek çözüm
import { useMemo } from "react";
function StatsPanel({ numbers }) {
const stats = useMemo(() => {
const sum = numbers.reduce((a, b) => a + b, 0);
const avg = sum / numbers.length;
return { sum, avg };
}, [numbers]);
return <p>{stats.sum} / {stats.avg}.</p>;
}
export default StatsPanel;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMemo'nun bağımlılığı ne olmalı?
- useEffect
- useRef
- numbers Doğru cevap
- DOM
Açıklama: numbers bağımlılık olmalı.
2 Medyan
Medyan hesabı için dizi önce ____.Medyan hesabı için dizi önce sıralanır.Açıklama: Medyan için önce sıralama yapılır.
3 Pahalı hesap adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useMemo |
önbellek |
numbers |
bağımlılık |
sort |
medyan |
reduce |
toplam |