Pejabat Bereaksi docs menyatakan bahwa " React.PureComponent's shouldComponentUpdate()hanya dangkal membandingkan benda-benda", dan menasihati terhadap hal ini jika negara adalah 'dalam'.

Mengingat hal ini, apakah ada alasan mengapa seseorang harus memilih React.PureComponentketika membuat komponen Bereaksi?

Pertanyaan :

• Adakah dampak kinerja dalam penggunaan React.Componentyang dapat kita pertimbangkan untuk berjalan React.PureComponent?
• Saya duga shouldComponentUpdate()dari PureComponentmelakukan hanya perbandingan dangkal. Jika ini masalahnya, tidak bisakah metode tersebut digunakan untuk perbandingan yang lebih dalam?
• "Selain itu, React.PureComponent's shouldComponentUpdate()melompat menopang update untuk seluruh subtree komponen" - Apakah ini berarti bahwa perubahan prop diabaikan?

Pertanyaan muncul dari membaca ke blog media ini , jika itu membantu.

Perbedaan utama antara React.PureComponentdan React.Componentadalah PureComponentmelakukan perbandingan dangkal pada perubahan negara. Ini berarti bahwa ketika membandingkan nilai skalar ia membandingkan nilainya, tetapi ketika membandingkan objek hanya membandingkan referensi. Ini membantu untuk meningkatkan kinerja aplikasi.

Anda harus mencari React.PureComponentketika Anda dapat memenuhi salah satu dari kondisi di bawah ini.

• Negara / Alat Peraga harus menjadi objek yang tidak berubah
• Negara / Alat Peraga seharusnya tidak memiliki hierarki
• Anda harus menelepon forceUpdatesaat data berubah

Jika Anda menggunakan React.PureComponentAnda harus memastikan semua komponen anak juga murni.

apakah ada dampak kinerja dalam menggunakan komponen React.component yang dapat kita pertimbangkan untuk React.PureComponent?

Ya, itu akan meningkatkan kinerja aplikasi Anda (karena perbandingan yang dangkal)

Saya menduga shouldComponentUpdate () dari Purecomponent hanya melakukan perbandingan yang dangkal. Jika ini masalahnya, bukankah metode tersebut digunakan untuk perbandingan yang lebih dalam?

Anda menebaknya dengan benar. Anda dapat menggunakannya jika Anda memenuhi salah satu kondisi yang saya sebutkan di atas.

"Selanjutnya, React.PureComponent's shouldComponentUpdate () melewatkan pembaruan prop untuk seluruh subtree komponen" - Apakah ini berarti bahwa perubahan prop diabaikan?

Ya, perubahan prop akan diabaikan Jika tidak dapat menemukan perbedaan dalam perbandingan yang dangkal.

Componentdan PureComponentmemiliki satu perbedaan

PureComponentpersis sama dengan Componentkecuali bahwa ia menangani shouldComponentUpdatemetode untuk Anda.

Ketika alat peraga atau negara berubah, PureComponentakan melakukan perbandingan yang dangkal pada alat peraga dan negara. Componentdi sisi lain tidak akan membandingkan alat peraga saat ini dan negara bagian berikutnya di luar kotak. Dengan demikian, komponen akan dirender ulang secara default setiap kali shouldComponentUpdatedipanggil.

Perbandingan Dangkal

Ketika membandingkan alat peraga sebelumnya dan menyatakan ke berikutnya, perbandingan dangkal akan memeriksa bahwa primitif memiliki nilai yang sama (misalnya, 1 sama dengan 1 atau itu benar sama dengan benar) dan bahwa referensi adalah sama antara nilai-nilai javascript yang lebih kompleks seperti objek dan array.

Sumber: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

Perbedaan utama, seperti yang saya lihat, adalah komponen rerender setiap kali rerender induknya, terlepas dari apakah properti dan status komponen telah berubah.

Komponen murni, di sisi lain, tidak akan merender kembali jika induknya merender ulang, kecuali alat peraga komponen murni (atau keadaan) telah berubah.

Sebagai contoh, katakanlah kita memiliki pohon komponen dengan hierarki tiga tingkat: orang tua, anak-anak dan cucu.

Ketika props orang tua diubah sedemikian rupa sehingga props hanya satu anak diubah, maka:

• jika semua komponen adalah komponen biasa, maka seluruh komponen pohon akan rerender
• jika semua anak dan cucu adalah komponen murni, maka hanya satu anak yang akan merender, dan satu atau semua cucunya, tergantung pada apakah alat peraga mereka diubah. Jika ada banyak komponen dalam komponen pohon ini, itu bisa berarti peningkatan kinerja yang signifikan.

Namun, kadang-kadang, menggunakan komponen murni tidak akan berdampak apa pun. Saya memiliki kasus seperti itu ketika orang tua menerima alat peraga dari toko redux dan perlu melakukan perhitungan yang rumit dari alat peraga anak-anaknya. Orang tua menggunakan flatlist untuk membuat anak-anaknya.

Hasilnya adalah bahwa setiap kali ada perubahan kecil di toko redux, seluruh susunan flatlist dari data anak-anak telah dihitung ulang. Ini berarti bahwa untuk setiap komponen dalam pohon, alat peraga adalah objek baru, bahkan jika nilainya tidak berubah.

Dalam hal ini, komponen murni tidak membantu, dan peningkatan kinerja hanya dapat dicapai dengan menggunakan komponen reguler dan memeriksa pada anak-anak, di shouldComponentUpdate, jika diperlukan rerender.