01.08. React Bileşeni Yaşam Döngüsü

DOM’da oluşturulan (render) her React bileşeni, oluşturma işleminden önce ve sonra bir dizi adımdan geçer. Bir bileşen her oluşturma işleminde “Yaşam Döngüsü (lifecycle)” olarak adlandırılan temel adımlardan geçer. Bu bölümde basit bir örnek üzerinden “Yaşam Döngüsü” konusu anlatılacaktır.

Bir bileşenin yaşam döngüsünde metotlarımız için önemli olan üç özel aşama vardır.

Mounting – Bağlama
Updating – Güncelleme
Unmouting – Ayırma

01.08.01. Mount

React bir bileşenin örneği oluşturup, onu DOM’a eklediğinde (mount), aşağıdaki metotlar çağrılır:

constructor() : Yapıcı metot bileşen oluşturulurken kullanılır.
getDerivedStateFromProps(): render metodunu çağırmadan hemen önce hem ilk mount işleminde hem de sonraki güncellemelerde (updating) çağrılır. Durumu güncellemek için bir nesneyi, hiçbir şeyi güncellemek için ise null değerini döndürmelidir.
render(): Görüntünün oluşturulduğu aşamadır. Reach elementleri (JSX), diziler, alt DOM ağaşları, DOM üzerindeki metinler ve sayılar bu aşamada görsel bir forma çevrilir. Hem mount hem de güncelleme aşamalarını içerir.
componentDidMount(): Bileşen bağlanmıştır ve burada yaşam döngüsü devam eder. Çünkü bileşen güncellenebilir.

01.08.02. Update

Herhangi bir nedenden ötürü bir bileşenin props veya state değerleri değiştirilirse, bileşenin güncellenmesi gerçekleştirilir. Bununla birlikte, bu durum aşağıdaki metotların çağrılmasına neden olan bileşenin yeniden işlenmesi gerektiği anlamına gelir.

getDerivedStateFromProps()
shouldComponentUpdate(): Bileşen güncellemesi
getSnapshotBeforeUpdate(): Render aşamasındaki çıktıdan hemen sonraki kısımdır. Bileşenleriniz değimeden önce DOM’un bazı bilgiler almasını sağlar. Örneğin bir kaydırma işleminde kaydırma konumu bu aşamada alınır.
render() : Tekrar görüntü oluşturulacak
componentDidUpdate(): Bileşen güncellendi

01.08.03. Unmount

Bir noktada bileşenimizin yaşam döngüsü sonlanacak ve bu aşamadan sonra render olmayacaktır. Bu aşamaya unmounting denir ve aşağıdaki metot kullanılabilir:

componentWillUnmount: Bileşenin yaşam döngüsü bitmeden önceki son istekleri için bir metot

01.08.04. Yaşam döngüsü akış şeması

Bu üç özel aşama kendi arasında bağımlıdır. Bu bağımlılığı göstermenin en güzel yolu bir akış şemasıdır. Google görsellerde “react lifecycle” araması yaptığınızda çok güzel akış şemaları geliyor. Ancak bu akış şemasında güncellemeler oluyor. Güncellemelere göre kod yazarken bazı kısımlarda esneklikler kazanabiliyorsunuz. En son güncel yaşam döngüsü diyagramı için tıklayın.

React v16.4

01.08.05. Basit bir örnek

Bu örnekte her aşamanın bazı metotları kullanarak basit bir saat uygulaması yapacağım. 10 saniye sonra da bileşeni sonlandıracağım. Yazılan kod:

class App10 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date(), cnt: 10};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),
      cnt: this.state.cnt - 1
    });
    if (this.state.cnt === 0)
    this.componentWillUnmount()
  }

  render() {
    return (
      <div>
        <h1>Bir bileşenin yaşam döngüsü!</h1>
        <h2>Saat: {this.state.date.toLocaleTimeString()}</h2>
        <h3>Geri sayım: {this.state.cnt}</h3>
      </div>
    );
  }
}

export {App01, App02, App03, App04, App05, App06, App07, App08, App09, App10}
export default App10;

class App10 extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date(), cnt: 10};

}

componentDidMount() {

this.timerID = setInterval(

() => this.tick(),

1000

);

}

componentWillUnmount() {

clearInterval(this.timerID);

}

tick() {

this.setState({

date: new Date(),

cnt: this.state.cnt - 1

});

if (this.state.cnt === 0)

this.componentWillUnmount()

}

render() {

return (

<div>

<h1>Bir bileşenin yaşam döngüsü!</h1>

<h2>Saat: {this.state.date.toLocaleTimeString()}</h2>

<h3>Geri sayım: {this.state.cnt}</h3>

</div>

);

}

export {App01, App02, App03, App04, App05, App06, App07, App08, App09, App10}

export default App10;

Constructor aşamasında tarih/saat bilgisini alıp bir sayaç (cnt) oluşturuldu. Bu metot bileşen ilk oluşurken çalışır ve bir daha çalışmaz. componentDidMount() metodu içinde bağlandıktan sonra 1 saniye bir tick() metodunun çalışması istendi. timerID tick metodu 1 saniye bir çalıştıran bölüm oldu. tick() metodu çağrıldığında zaman ve cnt değerlerini setState üzerinden güncelledi. componentWillUnmount() metodu çağrılmadığı sürece yaşam döngüsü devam eder. cnt sıfır değerine ulaşınca ben bu metodu manuel bir biçimde tick() metodu içinde çağırdım. Bu aşamada saat ve cnt değerinin güncellenmesinin durması gerekmektedir. render bölümün görüntünün oluşturulduğu bölümdür. Kodu incelerken akış şemasını da kullanmanızı öneririm.