Proje: Performans

Performans projesinin amacını ve adımlarını gözden geçirirsin.

Proje: Performans

Bu projede adım adım performans odaklı bir uygulama kuracağız. Üç derslik proje: pahalı hesap (useMemo), sabit handler (useCallback) ve memo'lu liste. Her ders bir öncekinin üstüne inşa edilir.

Senaryo: bir istatistik paneli. Kullanıcı veri girer, pahalı hesap yapılır (toplam, ortalama, medyan), her satır için tıklama işlemi vardır. Yanlış yazılırsa her tıklama tüm paneli yeniden çizer; doğru yazılırsa yalnızca ilgili kısım çizilir.

Üç dersin sonunda gerçek bir performans optimizasyonu deneyimi elde edersin. Profil araçlarıyla farkı görmek mümkün olur.

Üç adımlı yapı

İlk ders StatsPanel bileşenini yazar. Pahalı hesap (toplam, ortalama, medyan) useMemo ile önbelleğe alınır; veri değişmeyince hesap tekrar yapılır.

İkinci ders StatsRow bileşenini yazar. Tıklama işleyicisi useCallback ile sabitlenir; her satırın tıklaması üst bileşeni gereksiz çizdirmez.

Üçüncü ders MemoRow ile React.memo kullanır. Sabit prop'lar sayesinde yalnızca ilgili satır çizilir. Üç dersin birleştiği yer burasıdır.

Uygulama StatsApp iskeleti

Aşağıdaki iskeleti tamamla. StatsApp bileşeni yaz. useState([10, 20, 30]) ile numbers tanımla. <main><h1>İstatistik</h1><p>{ '{ numbers.length }' } öğe</p></main> döndür. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function StatsApp() {
  const [numbers] = useState([10, 20, 30]);
  return (
    <main>
      <h1>İstatistik</h1>
      <p>{numbers.length} öğe</p>
    </main>
  );
}

export default StatsApp;

Kendini test et

Performans optimizasyonu ne zaman yapılır?
- Her zaman
- Gerçek yavaşlık ölçüldüğünde
- Hiçbir zaman
- Yalnız CSS'te
Cevabı göster

Gerçek yavaşlık ölçüldüğünde — Yavaşlık ölçüldüğünde yapılır.

Üç araç

Performans için üç temel araç: useMemo, useCallback ve ____.

Cevabı göster

Performans için üç temel araç: useMemo, useCallback ve React.memo.

Performans adımlarını eşleştir

useMemo

hesap
useCallback

handler
memo

satır
profil

ölçüm

Sıradaki ders: Pahalı hesap

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler