React.memo
- React Native kursu
- Orta seviye
- Ders 88/116
- 5 dk
React.memo ile memoization öğrenirsin.
React.memo nedir?
React.memo bir bileşeni sarar; yalnızca props değiştiğinde yeniden render edilmesini sağlar. Üst bileşen render olsa bile props aynıysa React önceki çıktıyı kullanır ve gereksiz çizimi engeller.
Özellikle saf görüntü bileşenlerinde işe yarar. const MemoCard = React.memo(Card) yazarak sarmalanmış bir sürüm alırsın. Hızlı kaydırılan listelerde her satırın memo'lu olması performansı artırır. Ama küçük bileşenlerde memo yükü faydasını aşabilir; her yerde kullanma.
Memo kullanımı
React.memo'ya bileşeni verirsin; sarmalanmış bir bileşen alırsın. Üst render olduğunda bu sarmalanmış bileşen, eski props ile yeni props'u sığ karşılaştırır (sığ karşılaştırma). Eşitse yeniden çizilmez.
Özel bir karşılaştırma işlevi de verebilirsin: React.memo(Card, (prev, next) => prev.id === next.id). İkinci parametre true dönerse React atlar. Karmaşık props'larda bu esneklik işe yarar. Varsayılan sığ karşılaştırma çoğu durumda yeterlidir; özel işlevi yalnızca gerçekten gerektiğinde ekle.
Uygulama Memo'lu kart yaz
Bir Card bileşeni zaten tanımlı; title prop'u alır. React.memo ile MemoCard oluştur. Card fonksiyonunu olduğu gibi React.memo'ya ver.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
function Card({ title }) {
return <Text>{title}</Text>;
}
// React.memo ile MemoCard oluşturÖrnek çözüm
import React from 'react';
import { Text } from 'react-native';
function Card({ title }) {
return <Text>{title}</Text>;
}
const MemoCard = React.memo(Card);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React.memo ne zaman yeniden render olur?
const MemoCard = React.memo(Card);- Tema değiştiğinde
- Üst bileşen her render olduğunda
- State değişse bile asla
- Props değiştiğinde Doğru cevap
Açıklama: React.memo props değiştiğinde yeniden render eder.
2 React.memo çağrısı
const MemoCard = React.____(Card);const MemoCard = React.memo(Card);Açıklama: React.memo(Card) sarmalanmış bir bileşen döndürür.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
React.memo |
Props aynıysa atlar |
sığ karşılaştırma |
Varsayılan davranış |
ikinci parametre |
Özel karşılaştırma |
MemoCard |
Sarmalanmış bileşen |