LifeCycle Methods


componentWillMount() {
   Henüz component ortalıklarda yok ama çağırmadan önce  Component ın default konfigurasyonlarını ayarlayabiliriz. Henüz DOM la ilgili herhangi birşey olmadığı için yapabileceğimiz pek birşey yok.
Burada kurulumlar yapılabilir.
Mesela Firebaseden SQL connection yapılacaksa. Başlangıç değerleri atanacaksa gibi.
}
componentDidMount() {
   Artık componentımız burada ortaya çıkmış ve kullanıma hazır durumda.
  Burada verileri yükleyebiliriz.
  Basitçe burada isteidğiniz şekilde componenetla oynayabiliriz. setState i çağırabiliriz. Verileri doldurabiliriz.
}
componentWillReceiveProps(nextProps) {
  Herşey yolunda gidiyordu aniden yeni propsların akışı componentı bozmaya başladı.
  Componentımız yeni gelecek propslarla birşey yapmadan önce çağırılır.

 Burada hem şimdiki propslara (this.props) hemde bir sonraki propslara (nextProps) erişimimiz vardır.
 Burada çeşitli kontrollerle propsların değişip değişmediğine duruma göre değişmesi yada değişmemesine göre işlemler yapabiliriz.
Mesela bir pie chartımız var bizde geln propsun this.state.number durumunun değişmesi durumunda pie chartı değiştirmek istiyoruz gibi.
 setState kullanılablbilir.
}

shouldComponentUpdate(nextProps, nextState) {
  Herzaman boolean döndürür. Güncellemeliyim? Varsayıln olarak true döner.
  Mesela burada sadece geln props değiştiyse güncelle öbür türlü güncelleme gibi işlemler yaparız.
  componentın ne zaman tekrardan çağırılacağını güncelleneceğini kontrol etmek için çağırılır.
  setState kullanılamaz.
}

componentWillUpdate() {
 Burda artık component güncellenecek bunu biliyoruz. Buradaki soru güncellenmeden önce yapmamı istediğin birşey var mı?
 Nerdeyse componentWillReceiveProps la aynıdır ama setState kullanılamaz.
}

ComponentDidUpdate() {
  Component güncellendi. burada componentDidMount() taki gibi şeyler yapabiliriz. Kanvası yeniden çizme layoutta değişiklikler yapma gibi. 
DOM u state te veya propsta değişiklikler sonrası güncellemek için kullanırız. 
setState kullanılabilir. 
}

componentWillUnmount(){
   Component artık gidiyor. Gitmeden önce yapmak istediğin birşey var mı? 
  Mesela network requestini iptal edebilirsin, event listenerları silebilirsin basitçe burada temizleme işlemi yapabilirsin. 
setState kullanılamaz. 
}



Yorumlar

Bu blogdaki popüler yayınlar

React ile Google Maps Örnekleri