Apa perbedaan antara componentWillMount dan componentDidMount di ReactJS?

Saya melihat dokumentasi Facebook di ( React.Component ) dan menyebutkan bagaimana componentWillMountdipanggil pada klien / server sedangkan componentDidMounthanya dipanggil pada klien. Apa componentWillMounthubungannya dengan server?

componentWillMount pada dasarnya adalah konstruktor. Anda dapat menyetel properti instance yang tidak memengaruhi render, menarik data dari penyimpanan secara sinkron dan setState dengannya, dan kode bebas efek samping sederhana lainnya yang perlu Anda jalankan saat menyiapkan komponen.

Ini jarang diperlukan, dan tidak sama sekali dengan kelas ES6.

yang constructormetode tidak sama dengan componentWillMount.

Menurut penulis Redux, berisiko mengirimkan tindakan dari konstruktor karena dapat mengakibatkan mutasi status saat rendering.

Namun, mengirim dari componentWillMounttidak apa-apa.

dari masalah github :

Ini terjadi ketika dispatch () di dalam konstruktor satu komponen menyebabkan setState () di dalam komponen lain. React melacak "pemilik saat ini" untuk peringatan semacam itu — dan ia mengira kita memanggil setState () di dalam konstruktor ketika secara teknis konstruktor menyebabkan setState () di dalam beberapa bagian lain dari aplikasi. Saya tidak berpikir kita harus menangani ini — ini hanya React yang mencoba melakukan tugasnya sebaik mungkin. Solusinya adalah, seperti yang Anda catat dengan benar, untuk dispatch () di dalam componentWillMount () sebagai gantinya.

Untuk menambah apa yang dikatakan FakeRainBrigand, componentWillMountdipanggil saat merender React di server dan di klien, tetapi componentDidMounthanya dipanggil di klien.

componentWillMountdilakukan sebelum AWAL rendersebuah komponen, dan digunakan untuk menilai props dan melakukan logika tambahan berdasarkan mereka (biasanya untuk juga memperbarui status), dan dengan demikian dapat dilakukan di server untuk mendapatkan markup yang diberikan sisi server pertama .

componentDidMountdilakukan SETELAH awal renderketika DOM telah diperbarui (tetapi yang terpenting SEBELUM pembaruan DOM ini dilukis ke browser, memungkinkan Anda untuk melakukan semua jenis interaksi lanjutan dengan DOM itu sendiri). Ini tentu saja hanya dapat terjadi di browser itu sendiri dan tidak terjadi sebagai bagian dari SSR, karena server hanya dapat menghasilkan markup dan bukan DOM itu sendiri, ini dilakukan setelah dikirim ke browser jika menggunakan SSR

Interaksi lanjutan dengan DOM yang Anda katakan? Whaaaat ?? ... Ya - pada titik ini karena DOM telah diperbarui (tetapi pengguna belum melihat pembaruan di browser) dimungkinkan untuk mencegat lukisan yang sebenarnya ke layar dengan menggunakan window.requestAnimationFramedan kemudian melakukan hal-hal seperti mengukur yang sebenarnya Elemen DOM yang akan menjadi keluaran, di mana Anda dapat melakukan perubahan status lebih lanjut, sangat berguna misalnya menganimasikan ke ketinggian elemen yang memiliki konten panjang variabel yang tidak diketahui (karena Anda sekarang dapat mengukur konten dan menetapkan ketinggian ke animasi), atau untuk menghindari flash skenario konten selama beberapa perubahan status.

Berhati-hatilah untuk menjaga perubahan status dalam hal apa pun componentDid...karena jika tidak dapat menyebabkan loop tak terbatas karena perubahan status juga akan menyebabkan render ulang, dan karenanya yang lain, componentDid...terus, dan terus.

Sesuai dokumentasi ( https://facebook.github.io/react/docs/react-component.html )

Metode yang diawali dengan kemauan dipanggil tepat sebelum sesuatu terjadi dan

Metode yang diawali dengan did dipanggil kanan setelah sesuatu terjadi.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Namun, ada "gotcha": Panggilan asinkron untuk mengambil data tidak akan ditampilkan sebelum render terjadi. Artinya, komponen akan dirender dengan data kosong setidaknya sekali.

Tidak ada cara untuk "menjeda" rendering untuk menunggu data tiba. Anda tidak bisa mengembalikan janji dari componentWillMount atau berselisih dalam setTimeout.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

Komponen kami tidak akan memiliki akses ke UI Asli (DOM, dll.). Kami juga tidak akan memiliki akses ke referensi anak-anak, karena mereka belum dibuat. ComponentWillMount () adalah kesempatan bagi kita untuk menangani konfigurasi, memperbarui status kita, dan secara umum mempersiapkan render pertama. Ini berarti kita dapat mulai melakukan perhitungan atau proses berdasarkan nilai prop.

Kasus penggunaan untuk componentWillMount ()

Misalnya, jika Anda ingin menyimpan tanggal pembuatan komponen dalam status komponen Anda, Anda dapat mengaturnya dalam metode ini. Harap diingat bahwa pengaturan status dalam metode ini tidak akan merender ulang DOM. Ini penting untuk diingat, karena dalam kebanyakan kasus setiap kali kita mengubah status komponen, render ulang dipicu.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Kasus penggunaan untuk componentDidMount ()

Misalnya, jika Anda membuat aplikasi berita yang mengambil data tentang berita terkini dan menampilkannya kepada pengguna dan Anda mungkin ingin data ini diperbarui setiap jam tanpa pengguna harus menyegarkan halaman.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()Metode hanya mengubah halaman saat ini di komponen kelas tetapi ComponentWillMount()mengubah semua halaman yang dipengaruhi olehsetStates()