Özet - Yaşam döngüsü

mount, update ve unmount'ı birleştirerek bir kaynak yönetici yazarsın.

Özet - Yaşam döngüsü

Yaşam döngüsü üç aşamadan oluşur: mount (ilk çizim), update (state/prop değişimiyle yeniden çizim) ve unmount (kaldırma). useEffect bu üç aşamayı tek kancada birleştirir.

Boş dizi mount'ta, dolu dizi ilgili değişimde, dizi yoksa her çizimde çalışır. Cleanup döndürerek unmount davranışı eklenir. Görsel titreme varsa useLayoutEffect kullanılır.

Uygulama Mount ve unmount logu

Mount'ta console.log('mounted') yaz ve cleanup olarak console.log('unmounted') yaz. Boş bağımlılık dizisi kullan.

Örnek çözümü göster

import React, { useEffect } from 'react';
import { View } from 'react-native';

export default function Widget() {
  useEffect(() => {
    console.log('mounted');
    return () => {
      console.log('unmounted');
    };
  }, []);
  return <View />
}

Uygulama useLayoutEffect ekle

Bir useLayoutEffect ekle, içine console.log('layout') yaz ve boş bağımlılık dizisi kullan.

Örnek çözümü göster

import React, { useLayoutEffect } from 'react';
import { View } from 'react-native';

export default function Bar() {
  useLayoutEffect(() => {
    console.log('layout');
  }, []);
  return <View />
}

Kendini test et

Hangi dizi yalnızca mount'ta çalıştırır?
- [count]
- dizi yok
- [count, ready]
- []
Cevabı göster

[] — Boş dizi [] yalnızca mount'ta çalışır.
Yaşam döngüsü özeti

mount

İlk çizim
update

Yeniden çizim
unmount

Kaldırma
useLayoutEffect

Boyama öncesi

Sıradaki ders: Proje tasarımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler