Ders6 RN Usestate ve Useeffect Kullanımı

Kısa Özet

Bu video, React Native'de useState ve useEffect hook'larının nasıl kullanılacağını gösteriyor. useState, bir bileşenin durumunu takip etmek için kullanılırken, useEffect, bir bileşenin durumunun değiştiğinde veya bir bileşen ilk yüklendiğinde bir işlemin gerçekleştirilmesini sağlar. Video, her iki hook'un nasıl kullanılacağına dair örnekler sunuyor ve ayrıca setInterval fonksiyonunun nasıl kullanılacağını açıklıyor.

• useState hook'u, bir bileşenin durumunu takip etmek için kullanılır.
• useEffect hook'u, bir bileşenin durumunun değiştiğinde veya bir bileşen ilk yüklendiğinde bir işlemin gerçekleştirilmesini sağlar.

useState Kullanımı

Bu bölümde, useState hook'unun nasıl kullanılacağına dair bir örnek gösteriliyor. Örnekte, bir butona basıldığında bir sayacın artırılması ve azaltılması gösteriliyor. useState hook'u, sayacın durumunu takip etmek için kullanılıyor.

• useState hook'u, const [sayaç, setSayaç] = useState(0) şeklinde kullanılır.
• sayaç, sayacın mevcut değerini tutar.
• setSayaç, sayacın değerini güncellemek için kullanılır.
• Örnekte, butonlara basıldığında setSayaç fonksiyonu çağrılır ve sayacın değeri artırılır veya azaltılır.

useEffect Kullanımı

Bu bölümde, useEffect hook'unun nasıl kullanılacağına dair bir örnek gösteriliyor. Örnekte, bir sayacın her saniye artırılması ve bir butona basıldığında sayacın durdurulması gösteriliyor. useEffect hook'u, sayacın durumunu takip etmek ve sayacın her saniye artırılmasını sağlamak için kullanılıyor.

• useEffect hook'u, useEffect(() => { ... }, []) şeklinde kullanılır.
• useEffect hook'unun ilk parametresi, bir fonksiyonu alır. Bu fonksiyon, useEffect hook'u tetiklendiğinde çalıştırılır.
• useEffect hook'unun ikinci parametresi, bir dizi bağımlılık alır. Bu dizi, useEffect hook'unun ne zaman tetikleneceğini belirler.
• Örnekte, useEffect hook'u, aktif değişkeninin durumuna bağlı olarak tetiklenir.
• aktif değişkeni true ise, setInterval fonksiyonu çağrılır ve sayacın her saniye artırılması sağlanır.
• aktif değişkeni false ise, clearInterval fonksiyonu çağrılır ve sayacın artırılması durdurulur.

setInterval Fonksiyonu

Bu bölümde, setInterval fonksiyonunun nasıl kullanılacağı açıklanıyor. setInterval fonksiyonu, belirli bir zaman aralığında bir fonksiyonu çalıştırmak için kullanılır.

• setInterval fonksiyonu, setInterval(() => { ... }, 1000) şeklinde kullanılır.
• setInterval fonksiyonunun ilk parametresi, çalıştırılacak fonksiyonu alır.
• setInterval fonksiyonunun ikinci parametresi, fonksiyonun çalıştırılma aralığını milisaniye cinsinden alır.
• Örnekte, setInterval fonksiyonu, sayaç değişkenini her saniye artırmak için kullanılıyor.

Yaşam Döngüsü

Bu bölümde, React Native'deki yaşam döngüsü hakkında bilgi veriliyor. Yaşam döngüsü, bir bileşenin yaşam süresi boyunca gerçekleşen olayları tanımlar.

• Bir bileşen ilk yüklendiğinde, mount olayı gerçekleşir.
• Bir bileşen güncellendiğinde, update olayı gerçekleşir.
• Bir bileşen kaldırıldığında, unmount olayı gerçekleşir.
• useEffect hook'u, yaşam döngüsü olaylarını ele almak için kullanılabilir.

Bağımlılıklar

Bu bölümde, useEffect hook'unun bağımlılıkları hakkında bilgi veriliyor. Bağımlılıklar, useEffect hook'unun ne zaman tetikleneceğini belirler.

• useEffect hook'unun ikinci parametresi, bir dizi bağımlılık alır.
• Bu dizi boş bırakılırsa, useEffect hook'u sadece bir bileşen ilk yüklendiğinde tetiklenir.
• Bu diziye bir state değişkeni eklenirse, useEffect hook'u o state değişkeninin değeri değiştiğinde tetiklenir.
• Örnekte, useEffect hook'unun ikinci parametresi [aktif] olarak ayarlanmıştır. Bu, useEffect hook'unun aktif değişkeninin değeri değiştiğinde tetikleneceği anlamına gelir.