Pahalı hesap

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.

Örnek çözümü göster

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;

Kendini test et

useMemo'nun bağımlılığı ne olmalı?
- useEffect
- useRef
- numbers
- DOM
Cevabı göster

numbers — numbers bağımlılık olmalı.

Medyan

Medyan hesabı için dizi önce ____.

Cevabı göster

Medyan hesabı için dizi önce sıralanır.

Pahalı hesap adımlarını eşleştir

useMemo

önbellek
numbers

bağımlılık
sort

medyan
reduce

toplam

Sıradaki ders: Sabit handler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler