React Lifecycle Metotları Hakkında Bilgi

React Lifecycle Metotlarına Genel Bakış

React, bileşenlerin yaşam döngüleri boyunca farklı aşamalarda çalışabileceği bir dizi lifecycle metodu sunar. Bu metotlar, bileşenlerin oluşturulması, güncellenmesi ve yok edilmesi gibi işlemler sırasında çağrılır. React uygulamaları geliştirirken, bu lifecycle metotlarını kullanarak bileşenlerinizin durumunu ve render edilme süreçlerini daha iyi yönetebilirsiniz.

Lifecycle Metotları

1. Mounting Aşaması

Mounting sürecinde bileşen oluşturulur ve DOM’a eklenir. Bu aşamadaki metotlar şunlardır:

• constructor(): Bileşenin başlangıç durumunu ayarlamak için kullanılır.
• render(): Bileşenin nasıl görüneceğini döndürür.
• componentDidMount(): Bileşen DOM’a eklendikten sonra çalışır. API çağrıları ve event listener'lar için ideal bir yerdir.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return 
{this.state.data ? this.state.data : 'Loading...'}
;
  }
}

2. Updating Aşaması

Updating süreci, bileşenin durumunun veya propslarının değişmesiyle başlar. Bu aşamadaki metotlar şunlardır:

• shouldComponentUpdate(): Bileşenin yeniden render edilip edilmeyeceğine karar verir. Performansı artırabilir.
• componentDidUpdate(): Bileşen güncellendikten sonra çalışır. Önceki props ve duruma erişim sağlar.

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      console.log('Value changed!');
    }
  }

  render() {
    return 
{this.props.value}
;
  }
}

3. Unmounting Aşaması

Bileşenin DOM’dan kaldırılması sürecini kapsar. Tek bir metot içerir:

• componentWillUnmount(): Bileşen DOM’dan kaldırılmadan hemen önce çalışır. Temizlik işlemleri için yararlıdır.

class MyComponent extends React.Component {
  componentWillUnmount() {
    // Event listener kaldırma
    window.removeEventListener('resize', this.handleResize);
  }

  render() {
    return 
My Component
;
  }
}

Sonuç

React lifecycle metotları, bileşenlerin yönetiminde büyük bir esneklik sağlar. Bu metotları etkili bir şekilde kullanarak, uygulamanızın performansını artırabilir, karmaşık bileşen araçlarını daha iyi yönetebilir ve kullanıcı deneyimini geliştirebilirsiniz. Lifecycle metotlarını öğrenip kullanmak, modern React geliştirme süreçlerinin önemli bir parçasıdır.