React Lifecycle (Yaşam Döngüsü)
Merhaba arkadaşlar,
Bu yazıda bir react proje sayfasındaki component’lerin yaşam döngüsünü incelemeye çalışacağız.
Yukarıdaki adımlardan da önce bir adımımız daha var o da komponentin oluşturulmasıdır. Yani Initialization
İkinci adımımız Mounting, komponentin Dom’a bağlanması adımı.
Üçüncü adımımız Updating Dom üzerinde güncellenmesi işlemi .
Dördüncü ve son adımımız ise Unmointing yani Dom’dan kaldırılması işlemi.
ComponentWillMount
Komponentin Real Dom’a aktarılmadan önceki andır. Yani render işleminden hemen önceki tetiklenen Event’tir. Aynı constructor gibi özel tanımlı bir fonksiyondur.
Not *=* Render fonksiyonu daha sonra çalışacağı için SetState fonksiyonu çalışmaz.
Not *=* Constructor metodu en başta çalışır yani sırasıyla
Constructor>componentWillMount
ComponentDidMount
Komponent Dom’a render edildikten sonra çalışan Event’ımızdır. Yani render işleminden sonra çalışır.
Yani artık sırasıyla
Constructor>ComponentWillMount>Render>ComponentDidMount
Not *=* ComponentDidMount’ta setState işlemi yapılırsa tekrardan Render işlemi yapılır.
Not *=* Eğer komponentinizin bir child komponenti varsa ve aynı eventlara sahipse çalışma sıraları şu şekilde olacaktır.
Construtor>ComponentWillMount>Render>Child Constructor> Child ComponentWillMount>Child Render>Child ComponentDidMount>ComponentDidMount
Yani buradan şunu anlamamız gerekiyor arkadaşlar. Ebeveyn bir komponentin içinde child bir komponent varsa ebeveyn komponentimizin didMount olayından önce Child komponentimizin aksiyonları sırasıyla bildiğimiz sırayla işlenecektir.
ComponentWillReceiveProps
Eğer bir komponentte props varsa ve bu props’u değiştirme işlemi yaptıysanız o esnada tetiklenen event’tır.
Bu özel tanımlı fonksiyonumuzu çalıştırdığımızda işleyişimiz şu şekilde olacaktır.
Render>ComponentWillReceiveProps
Yani tekrar render edilip ardından event’ımız tetiklenecektir.
ShouldComponentUpdate
Props veya state değiştiği anda biz komponentimizin baştan render edilip edilmemesi gerektiğini manual olarak belirleyebiliyoruz. Bu event’ımız sadece boolen değer döndürür. True ise komponent baştan render edilir false ise render edilmez. Varsayılan olarak True değer döndürür. İki tane parametre alır bunlar nextProps ve nextState, bunlarda güncellenmiş olan verileri bize veriyor.
ComponentWillUpdate
ShouldComponentUpdate’den true döndüğü sürece çalışacaktır. Yani özetle komponentin güncellenmesi halinde çalışacak event’ımızdır.Yine iki parametre alır. nextProps ve nextStates.
Eğer ShouldComponentUpdate’den true sonuç dönerse çalışacağını söylemiştik. Ancak öncemli bir not olarak şunu belirtmek isterim. True döndü varsayalım ve böylelikle sayfa render edilecektir. Ancak burdaki önemli ayrıntı sayfa render edilmeden hemen önce çalışmasıdır.Yani;
ShouldComponentUpdate(True)>ComponentWillUpdate>Render
Şeklinde döngüyü devam ettirecektir ve sonrasında ComponentDidUpdate Event’ı tetiklenecektir. Aşağıda onu inceleyelim.
ComponentDidUpdate
Bu event’ımızda benzer mantıkta yine iki parametre alıyor. ShouldComponentUpdate den true döndükten sonra ComponentWillUpdate çalışır ve Render işlemi çalışıyor. Bu işlemdeki Render işleminden sonra çalışacak event’ımız ComponenDidUpdate olacaktır.
ComponentWillUnmount
Dom üzerinden kaldırılması işlemi diyebiliriz kısaca. Yani bütün işlemler bittikten sonra bileşen dom üzerinden kaldırılmadan önce çalışacak Event’ımızdır.
React’a ufak ufak ilgilenen biri olarak az çok öğrendiklerimden hazırladığım küçük bir makale hazırlamak istedim. Yanlışım varsa affola. Faydalı olması dileğiyle.
Discord sunucumuza katılmak için:
