React.js Lifecycle (Bileşen Yaşam Döngüsü)

React.js’te bileşen yaşam döngüsü, bir bileşenin oluşturulduğu, güncellendiği ve yok edildiği süreci tanımlar. Bu yaşam döngüsü, bileşenin belirli aşamalarında özel metotların çağrılmasını içerir, böylece bileşenin farklı aşamalarında belirli işlemler gerçekleştirilebilir.

İşte React bileşen yaşam döngüsünün bazı temel aşamaları ve bu aşamalarda çağrılan bazı özel metotlar:

Oluşturma (Mounting):

• constructor(): Bileşen oluşturulduğunda ilk çağrılan yöntem. Bileşenin başlangıç durumunu ayarlamak için kullanılır.
• render(): Bileşenin arayüzünü oluşturur ve döndürür.
• componentDidMount(): Bileşenin render edilmesinin ardından hemen çağrılan metot. Bileşenin bir kere oluşturulduğunda yapılması gereken işlemler burada gerçekleştirilir (API çağrıları, abonelikler vb.).

Güncelleme (Updating):

• render(): Her güncelleme işleminde çağrılır, bileşenin arayüzünü günceller.
• componentDidUpdate(prevProps, prevState): Her güncelleme işleminden sonra çağrılır. Önceki props ve state değerlerine erişim sağlar ve güncelleme sonrası işlemleri gerçekleştirir.

Kaldırma (Unmounting):

• componentWillUnmount(): Bileşen DOM’dan kaldırılmadan önce çağrılır. Aboneliklerin ve diğer temizleme işlemlerinin yapılması için kullanılır.

Hata Yakalama (Error Handling):

• componentDidCatch(error, info): Bileşenin alt bileşenlerinden birinde hata oluştuğunda çağrılır. Bu metot, bileşenin alt ağaçlarında oluşan hataları yakalar ve uygun şekilde işleyebilir.

React bileşen yaşam döngüsü, bileşenlerin nasıl davrandığını ve hangi durumlarda belirli işlemlerin gerçekleştirileceğini kontrol etmek için kullanılır. Bu döngü, bileşenin farklı aşamalarında belirli işlemleri gerçekleştirerek bileşenin etkileşimli ve dinamik bir şekilde çalışmasını sağlar.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    console.log('Constructor çalıştı.');
  }

  componentDidMount() {
    console.log('ComponentDidMount çalıştı.');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('ComponentDidUpdate çalıştı. Önceki state:', prevState.count, 'Yeni state:', this.state.count);
  }

  componentWillUnmount() {
    console.log('ComponentWillUnmount çalıştı.');
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    console.log('Render çalıştı.');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Artır</button>
      </div>
    );
  }
}

export default MyComponent;

Bu örnekte, MyComponent adında bir sınıf bileşeni oluşturduk. Bu bileşenin yaşam döngüsü metotları olan constructor, componentDidMount, componentDidUpdate ve componentWillUnmount kullanıldı. Ayrıca render metodu, bileşenin arayüzünü oluşturur.

Bileşen state içinde count adında bir sayacı saklar. incrementCount fonksiyonu, sayacı artırmak için kullanılır ve butona tıklanınca çağrılır.

Konsola bu yaşam döngüsü metotlarının ne zaman çağrıldığını görmek için console.log ekledik. Bu, bileşenin her aşamasının ne zaman gerçekleştiğini izlememize yardımcı olur.

Bu bileşen, her butona tıklandığında sayacı bir artırır ve bu süreçte yaşam döngüsü metotlarının nasıl çalıştığını konsola yazar.

Share on Facebook

Tweet