oke minggu lalu kita sudah membahas tentang react router pada react js. bagi yang belum baca bisa baca disini. oke, apa yang kita bahas untuk minggu ini? oke minggu ini kita akan membahas Component Lifecycle pada react js.
jadi apa itu component lifecycle? oke pada dasarnya component lifecycle adalah sirklus hidup pada react js. Sama seperti manusia, setiap component di react js ternyata juga memiliki siklus hidup.
Component – component di react js akan melewati tiga fase hidup, yaitu :
- Mounting
- Updating
- Unmounting
oke gausah bingung saya akan menjelaskan dan menjabarkan beberapa hal diatas.
Mounting
Pada fase ini ada tiga methods yang akan di eksekusi yaitu:
- componentWillMount
- componentDidMount
- render
componentWillMount adalah method yang akan di eksekusi pertama kali, kemudian akan mengeksekusi method render.
Di dalam method render inilah kita menyimpan tag tag html yang nanti nanti akan di render sebagai jsx oleh react, gaya penulisan tag html di file html biasa juga sedikit berbrda dibandingkan dengan di jsx.
Setelah method render di eksekusi baru kemudian mengeksekusi method componentDidMount
operasi lain seperti request data dari API semuanya dilakukan di sini.
Updating
Fase updating adalah fase ketika sebuah component akan di render ulang, biasanya ini terjadi ketika ada perubahan pada state atau props yang mengakibatkan perubahan DOM.
Pada fase ini ada 5 methods yang akan di eksekusi yaitu:
- componentWillReceiveProps :
- fungsi ini akan di eksekusi bila state yang ada di component akan di update atau di ubah dengan nilai props yang baru.
- shouldComponentUpdate :
- funsi ini adalah untuk menentukan apakah sebuah component akan di render ulang atau tidak.Method ini akan mengembalikan nilai boolean true & false, jika true maka component akan di render ulang atau sebaliknya.
- componentWillUpdate :
- fungsi ini akan di eksekusi jika fungsi shouldComponentUpdate mengembalikan nilai true. Kemudian kembali method render akan di jalankan
- componentDidUpdate :
- fungsinya sama dengan componentDidMount yaitu untuk manipulasi DOM dan request data.
Unmount
Fase unmounting adalah fase ketika component di hapus dari DOM
di fase ini method yang akan di eksekusi hanya ada satu yaitu componentWillUnmount, yang akan di eksekusi sebelum sebuah component di hapus dari DOM.
mungkin sekian untuk hari ini, semoga bermanfaat.