Proje: Performans
- React kursu
- Orta seviye
- Ders 33/80
- 4 dk
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.
Başlangıç kodu
import { useState } from "react";
// StatsApp bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Performans optimizasyonu ne zaman yapılır?
- Her zaman
- Gerçek yavaşlık ölçüldüğünde Doğru cevap
- Hiçbir zaman
- Yalnız CSS'te
Açıklama: Yavaşlık ölçüldüğünde yapılır.
2 Üç araç
Performans için üç temel araç: useMemo, useCallback ve ____.Performans için üç temel araç: useMemo, useCallback ve React.memo.Açıklama: React.memo üçüncü araçtır.
3 Performans adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useMemo |
hesap |
useCallback |
handler |
memo |
satır |
profil |
ölçüm |