Update
- React Native kursu
- Orta seviye
- Ders 60/116
- 5 dk
Bileşen update olayını öğrenirsin.
Update
Bir bileşen mount olduktan sonra state ya da prop değişirse update aşamasına geçer. React, bileşeni yeniden çağırır, yeni JSX'i hesaplar ve değişen kısımları ekrana uygular. Bu yeniden çizime re-render denir.
Update sırasında useEffect'in bağımlılık dizisindeki değerlerden biri değiştiyse efekt tekrar çalışır. Boş dizi yalnızca mount'ta; dolu dizi her ilgili değişimde çalışır.
Re-render tetikleyicileri
Re-render üç durumda tetiklenir: setState çağrısı, ebeveynin yeniden çizmesi ya da Context değerinin değişmesi. Bir bileşen kendi state'ini değiştirirse kendisi de çocukları da yeniden çizilir.
Her çizim yeni bir JSX döndürür; React eskiyle karşılaştırıp yalnızca farkı uygular. Bu yüzden re-render ucuzdur; asıl maliyet yan etkilerde ve ağır hesaplarda olur.
Uygulama count değişimini izle
count her değiştiğinde console.log('count: ' + count) yaz. useEffect kullan ve bağımlılık dizisine count ekle.
Başlangıç kodu
import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';
export default function Counter() {
const [count, setCount] = useState(0);
// count değişince log yaz
return (
<View>
<Text>{count}</Text>
<Button title="Artır" onPress={() => setCount(count + 1)} />
</View>
);
}Örnek çözüm
import React, { useState, useEffect } from 'react';
import { Button, Text, View } from 'react-native';
export default function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('count: ' + count);
}, [count]);
return (
<View>
<Text>{count}</Text>
<Button title="Artır" onPress={() => setCount(count + 1)} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Dolu bağımlılık dizisi
useEffect(() => { save(count); }, ____);useEffect(() => { save(count); }, [count]);Açıklama: [count] dizisi count değişince efektin çalışmasını sağlar.
2 Aşağıdakilerden hangisi re-render tetiklemez?
- setState çağrısı
- Ebeveynin çizimi
- Context değerinin değişimi
- Bir kardeş bileşenin çizimi Doğru cevap
Açıklama: Kardeş bileşenlerin çizimi birbirini etkilemez.
3 Re-render nedenleri
| Kavram | Anlamı |
|---|---|
setState |
State değişimi |
prop |
Ebeveyn verisi |
Context |
Global değer |
mount |
İlk çizim |