Mengapa dokumen React merekomendasikan melakukan AJAX di componentDidMount, bukan componentWillMount?

102

Judulnya menjelaskan semuanya. Saya mengerti mengapa componentDidMountcocok untuk apa pun yang membutuhkan akses DOM, tetapi permintaan AJAX tidak selalu atau biasanya membutuhkan ini.

Apa yang memberi?

reactjs

— Alan H.
sumber

@FurkanO Saya pikir yang dia maksud adalah akses ke elemen DOM yang diberikan oleh komponen. Dan dia sepenuhnya benar karena jika Anda mencoba mengakses elemen tersebut di componentWillMountdalamnya akan gagal karena komponen ... tidak dipasang.

— ZekeDroid

@Tokopedia Menghapus pertanyaan saya, tentu saja Anda memiliki akses ke dom di componentDidMount. Ini adalah aturan, tidak ada yang perlu dijelaskan tentang itu. Terima kasih.

— FurkanO

Menurut pendapat saya, mengapa kita memanggil fungsi Ajax setelah componentDidMount adalah kita harus memastikan terlebih dahulu bahwa Elemen dirender dengan lancar di awal. Setelah itu kita bisa melakukan panggilan ajax. Jika kita memanggil ajax terlebih dahulu dan terjadi kesalahan maka akan menyebabkan masalah pada rendering

— Faris Rayhan

Jawaban:

componentDidMountuntuk efek samping. Menambahkan event listener, AJAX, mutasi DOM, dll.

componentWillMountjarang berguna; terutama jika Anda peduli tentang rendering sisi server (menambahkan event listener menyebabkan kesalahan dan kebocoran, dan banyak hal lain yang bisa salah).

Ada pembicaraan tentang penghapusan componentWillMountdari komponen kelas karena ini melayani tujuan yang sama dengan konstruktor. Ini akan tetap pada createClasskomponen.

— Perampok
sumber

Menambahkan event listener menyebabkan kesalahan dan kebocoran sepanjang waktu di server, atau hanya di componentWillMount? Saya tidak begitu melihat perbedaannya.

— Alan H.

@Alan - Jika Anda menggunakan React di sisi klien dan sisi server, Anda akan menemukan bahwa apa pun di dalamnya componentWillMountakan dieksekusi pada render sisi server. Sedangkan jika Anda menggunakan componentDidMountmaka itu hanya akan dieksekusi di sisi klien. Akibatnya, memasukkan benda-benda componentWillMountyang melakukan interaksi eksternal atau mengikat ke acara dll, bukanlah ide yang bagus. Jika Anda tidak memiliki rencana untuk merender komponen Anda di sisi server, itu masih bukan ide yang baik hanya untuk portabilitas kode potensial. Ini semua di luar alasan utama buruk yang dijelaskan dalam jawaban @daniula.

— Mike Driver

componentWillMount dijalankan di server, tetapi componentWillUnmount (tempat Anda menghapus listener) tidak. Ini akan menyebabkan Anda menambahkan pendengar dan tidak pernah membersihkannya.

— Brigand

Orang-orang di tim inti React sedang mempertimbangkan untuk menghapus componentWillMount dari versi mendatang.

— cchamberlain

@AnkitSinghaniya akan merusak rendering server dan pengujian unit yang dangkal.

— Brigand

Saya juga mengalami masalah yang sama pada awalnya. Saya memutuskan untuk mencoba membuat permintaan componentWillMounttetapi berakhir di berbagai masalah kecil.

Saya memicu rendering ketika panggilan ajax selesai dengan data baru. Pada titik tertentu, rendering komponen membutuhkan lebih banyak waktu daripada mendapatkan respons dari server dan pada titik ini callback ajax memicu render pada komponen yang tidak terpasang. Ini adalah jenis casing tepi tetapi mungkin ada lebih banyak, jadi lebih aman untuk mematuhinya componentDidMount.

— daniula
sumber

Oke terima kasih. Pikirnya mungkin seperti itu, tapi Anda benar, itu mengejutkan bahwa permintaan ajax bisa selesai sebelum render selesai.

— Alan H.

@daniula Apakah Anda yakin? Bagaimana permintaan AJAX selesai sebelum render?

— Leon Grapenthin

Ini adalah dunia browser asynchronous. Anda tidak boleh berasumsi bahwa satu fungsi akan selalu lebih cepat dari yang lainnya. Seperti yang saya sebutkan itu kasus tepi dan mungkin berarti Anda harus mengoptimalkan proses rendering Anda tetapi menggunakan metode siklus hidup yang tepat akan membuat hidup Anda jauh lebih mudah pada saat ini.

— daniula

@SooChengKoh setara dengan konstruktor kelas ES6 componentWillMount, jadi Anda harus tetap menggunakan componentDidMountuntuk panggilan ajax Anda.

— daniula

@SooChengKoh - Jelas tidak boleh melakukan apa pun di konstruktor yang akan mengarah ke status yang harus disetel, yang akan menyebabkan kondisi balapan di klien dan server. Anda tidak boleh memanggil setStatekonstruktor komponen dan Anda tidak memiliki cara untuk menentukan kapan panggilan AJAX akan selesai. twitter.com/dan_abramov/status/576453138598723585

— cchamberlain

Menurut pengaturan dokumentasi, status dalam componentWillMounttidak akan memicu rendering ulang. Jika panggilan AJAX tidak memblokir dan Anda mengembalikan Promisepembaruan status komponen saat berhasil, ada kemungkinan respons datang setelah komponen dirender. Karena componentWillMounttidak memicu render ulang, Anda tidak akan memiliki perilaku yang Anda harapkan, yaitu komponen yang dirender dengan data yang diminta.

Jika Anda menggunakan salah satu pustaka fluks dan data yang diminta berakhir di penyimpanan komponen yang terhubung (atau mewarisi dari komponen yang terhubung) ini tidak akan menjadi masalah karena penerimaan data itu, kemungkinan besar, akan mengubah alat peraga akhirnya.

— gabriel.g
sumber

componentWillMounttidak memicu render ulang hanya karena status baru ditentukan sebelum render pertama. Tetapi jika setStatedipanggil dalam callback AJAX, itu pasti akan dipanggil setelah render pertama, dan itu akan memicu render ulang.

— webdif