Render ulang komponen React setelah props berubah

Question

Di dokumen React, tertulis

Secara default, ketika status komponen atau props Anda berubah, komponen Anda akan dirender ulang.

Saya mengerti tentang perubahan status, tetapi saya tidak yakin tentang kapan alat peraga berubah. Sejauh yang saya ketahui, props selalu diteruskan dari komponen induk ke komponen anak. Dan ketika komponen induk dirender ulang (karena perubahan status, misalnya), semua komponen turunan juga dirender ulang (mengabaikan shouldComponentUpdate). Jadi menurut saya, jika komponen induk dirender ulang, semua komponen turunan akan dirender ulang terlepas dari apakah saya memberikan properti baru kepada mereka atau tidak. Jika saya meneruskan props baru ke komponen anak, fakta merender ulang anak hanya karena induknya melakukan rendering ulang, bukan karena saya meneruskan props baru.

Apakah ada skenario di mana komponen induk meneruskan props baru ke komponen anak, menyebabkan komponen anak dirender ulang, tetapi tidak hanya disebabkan oleh rendering ulang komponen induk?

Apakah mungkin untuk melihat contoh di mana komponen akan dirender ulang karena menerima props baru, bukan karena induknya sedang merender ulang (atau statusnya sendiri berubah)?

Maaf jika ini pertanyaan dasar, saya baru mengenal React.

EDIT: Saya melihat bahwa Redux dapat menyebabkan komponen dirender ulang dengan melewatkan alat peraga baru, saya ingin tahu apa yang dilakukan Redux di belakang layar untuk mencapai ini.

Answer 1

Untuk menjawab pertanyaan yang Anda ajukan di akhir:

• Jika anak adalah a PureComponentatau dibungkus di React.memodalamnya hanya akan merender ulang jika alat peraga berubah. Jika induk merender ulang maka komponen akan membandingkan props yang diterimanya dan jika mereka identik dengan props yang diteruskan sebelumnya, itu tidak akan merender ulang.

• Jika anak tidak seorang PureComponentatau dibungkus React.memomaka akan kembali membuat setiap saat induknya re-merender.

Answer 2

Saat Anda menggunakan provider, atau HOC, atau Redux dengan mapStateToProps misalnya, props diubah dari props injeksi komponen lainnya.

Answer 3

Saya bukan orang baru untuk bereaksi dan menanyakan hal yang sama. Ada sebuah artikel yang menjelaskan bagi saya:https://thoughtbot.com/blog/react-rendering-misconception

Rendering ulang diperlukan untuk pemeriksaan diff jika pembaruan DOM diperlukan. Jika Anda telah mengimplementasikan shouldComponentUpdate atau dibungkus dengan memo (keduanya mengembalikan false), maka perenderan dilewati.

Jika komponen anak dihubungkan menggunakan redux atau konteks, maka itu mungkin dirender ulang bahkan tanpa induk yang dirender.

Answer 4

1. Hubungkan middleware redux mirip dengan langganan, setiap komponen anak dapat langsung terhubung ke toko melalui langganan, dan setiap kali toko berubah, toko mencoba untuk menyinkronkan ulang semua komponen yang terhubung. Data baru yang masuk ke komponen apa pun datang sebagai props yang menghasilkan render ulang.
2. Komponen apa pun yang diubah dari luar statusnya hanya bisa melalui props, jadi ini mirip dengan komponen induk yang meneruskan penyimpanan data / redux baru yang mendorong data baru ke komponen.