React LifeCycle

Merhaba sevgili yazılım aşıkları,

React projelerindeki lifecycle sürecide genel react mimarisinde olduğu gibi çok basittir. Mount(Oluşum), LifeTime(Yaşam) ve Unmount(Ordan kaldırma) olmak üzere 3 adımdan oluşmaktadır. Bu yapıyı elimden geldiğince kısa bir şekilde açıklamaya çalışacağım.

React lifecyle 01

Mount(Oluşturma) Süreci

Bu bölümdeki methodlar bir react componentinin oluşturulması sırasındaki kullanabilceğimiz methodlardır.

Mount sürecini dört ana adımda inceleyebiliriz.

1. adım GetDefaultProps ile Props ve GetInitialState ile State Degerleri ayarlarlanır.(peki nedir bu props state)
2. adım React Componentleri Render edilmeden hemen önceki adımdır. Bu aşamada hala state üzerinde değişiklik yapabilme imkanımız vardır. Bu aşamada ComponentWillMount methodu tetiklenir.
3. adım React Componetlerinin Html karşılıkları oluşturularak ilgili method geriye oluşturulan çıktıyı döner. Bu sırada oluşturulan çıktı Sanal DOM’a yazılır. Ardından Dom üzerinde işlemler geçekleştirilir. Bu aşamada Render methodu tetiklenir. React Componetleri içerisinde kullanılması zorumlu tek methoddur.
4. adım React Componetleri Dom üzerinde oluşturulmuştur. Bu aşamada ComponetDidMount methodu tetiklenir. Server-Side-Rendering kullanılması durumunda bu method tetiklenmeyecektir.

Lifetime(Yaşam) Süreci

Bu bölümdeki methodlar React komponentlerinin render edilip Dom’a basıldıktan Dom’dan kaldırılana kadarki zaman diliminde tetiklenecek methodlardır.

Lifetime sürecini 5 ana adımda inceleyebiliriz.

1. adım Componetler property lerini yukarıdan aşağıya doğru one-way-binding şeklinde aktarır. Props’lar üzerinde değişiklik olduğunda çalışır. Bu adımda ComponetWillReceiveProps mothodu tetiklenir. Method içerisinden props değişikliklerine ulaşılabilir.
2. adım React çalışması itibariyle props’lar ve state üzerinde değişiklik olduğunda otomatik olarak render işlemini çalıştırabilmektedir. Bu adımda ShouldComponentUpdate methodu tetiklenir. Method false degeri dönerse componetin rendering işlemi iptal edilmiş olur.Method üzerinden state ve props durumlarına ulaşılabilir.
3. adım ComponetWillMount methodunda olduğu gibi React Componentlerinin render edilmemesinden hemen önceki adımdır. Farkı ise ilk render işleminde değil props veya state üzerinde değişiklik olduğunda çalışmasıdır. Bu adımda ComponentWillUpdate methodu tetiklenir.
4. adım React Componetlerinin Html karşılıklarını döndürür. Dönen nesne DOM’un karşılığı değil DOM’un sanal karşılığıdır. Dom’un bellekteki karşılığı ile karşılaştırılır eğer gerekiyorsa DOM üzerine değişiklikler uygulanır.
5. adım ComponentDidMount methodunda olduğu gibi React Componetlerinin Dom üzerinde oluşturulduğunu anlatır. Bu aşamada ComponetDidUpdate methodu tetiklenir. Server-Side-Rendering kullanılması durumunda bu method tetiklenmeyecektir.

UnMount (Ortadan Kaldırma) Süreci

Bu bölümde kullanabileceğimiz bir tane method vardır. React komponentlerinin render edilip Dom’a basıldıktan sonra Dom üzerinden kaldırılması durumunda tetiklenecek methoddur. Bu method sayesinde Componet uygulama hiyararşisi içerisinden kaldırılırken daha önce component ile ilişkilendirilen nesnelerin temizlenmesini sağlar. Tetiklenen method ComponentWillUnmount methodudur.

Örnek çalışmanın kodları aşağıdaki gibidir.