Layout effect
- React Native kursu
- Orta seviye
- Ders 63/116
- 5 dk
useLayoutEffect ve useEffect farkını öğrenirsin.
useLayoutEffect
useLayoutEffect, useEffect ile aynı imzaya sahiptir ama farklı bir zamanda çalışır. Efekt, tarayıcı ekranı boyamadan önce senkron olarak çağrılır. Bu, ölçüm yapıp görünürü güncellemek için uygundur.
Ölçüm yapıp hemen stili değiştireceksen useLayoutEffect kullan; yoksa kullanıcı önce eski halini görüp sonra yenisini görebilir. Yan etkilerin çoğu için useEffect yeterlidir.
Ne zaman useLayoutEffect?
Çoğu durumda useEffect doğru seçimdir. useLayoutEffect yalnızca ölçüm yapıp aynı çizimde güncelleme gerektiğinde kullanılır; örneğin bir öğenin genişliğini ölçüp konumunu ayarlamak.
useLayoutEffect çizimi engellediği için aşırı kullanımı performansı düşürür. Önerilen yöntem: önce useEffect, görsel titreme görürsen useLayoutEffect'e geç.
Uygulama useLayoutEffect ekle
Bir useLayoutEffect ekle. İçinde console.log('layout') yaz ve boş bağımlılık dizisi kullan.
Başlangıç kodu
import React, { useRef } from 'react';
import { View } from 'react-native';
export default function Box() {
const ref = useRef(null);
// useLayoutEffect ile ölçüm yap
return <View ref={ref} />
}Örnek çözüm
import React, { useRef, useLayoutEffect } from 'react';
import { View } from 'react-native';
export default function Box() {
const ref = useRef(null);
useLayoutEffect(() => {
console.log('layout');
}, []);
return <View ref={ref} />
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useLayoutEffect imzası
useLayoutEffect(() => { measure(); }, ____);useLayoutEffect(() => { measure(); }, []);Açıklama: Boş dizi, mount'ta bir kez ölçüm yapar.
2 Efekt zamanlaması
| Kavram | Anlamı |
|---|---|
useLayoutEffect |
Boyamadan önce |
useEffect |
Boyamadan sonra |
mount |
İlk çizim |
cleanup |
Unmount öncesi |
3 useLayoutEffect ne zaman çalışır?
- Boyamadan sonra
- Yalnızca unmount'ta
- Boyamadan önce Doğru cevap
- Hiçbir zaman
Açıklama: Boyamadan önce, senkron çalışır.