ReactJS: Adakah `setState` Sentiasa Mencetuskan Paparan Semula Penuh?

ReactJS: Adakah "render" Trigger Setiap Kali "setState" Dipanggil?

React direka bentuk untuk memaparkan semula komponen dengan cekap hanya apabila perlu. Walau bagaimanapun, tingkah laku ini mungkin tidak selalu kelihatan, yang membawa kepada persoalan tentang hubungan antara "setState" dan pemaparan.

Gelagat Perenderan Lalai

Secara lalai, memanggil "setState " mencetuskan pemaparan semula penuh komponen dan semua komponen anaknya. Ini memastikan bahawa sebarang perubahan kepada keadaan ditunjukkan dengan tepat dalam UI.

Tingkah laku ini adalah hasil daripada "shouldComponentUpdate" sentiasa kembali benar secara lalai. Kaedah ini menentukan sama ada komponen perlu mengemas kini output pemaparannya berdasarkan perubahan pada prop atau keadaan.

Tujuan Render

Walaupun "render" dipanggil setiap kali " setState" digunakan, React tidak mengemas kini DOM dengan serta-merta. Sebaliknya, DOM Maya dijana mewakili keadaan UI yang dikehendaki. DOM sebenar hanya diubah suai jika terdapat perubahan antara DOM Maya lama dan baharu.

Contoh

Pertimbangkan coretan kod yang disediakan dalam soalan:

this.setState({'test':'me'});

Walaupun keadaan tidak berubah selepas klik awal, kedua-dua komponen induk dan anak dipaparkan semula. Ini kerana "shouldComponentUpdate" sentiasa kembali benar, memaksa pemaparan semula.

Mengoptimumkan pemaparan Semula

Untuk mengelakkan pemaparan semula yang tidak perlu, anda boleh mengatasi "shouldComponentUpdate " dan bandingkan prop dan keadaan baharu dengan nilai sebelumnya. Jika tiada perubahan ketara yang akan menjejaskan UI, anda boleh mengembalikan palsu untuk mengelakkan pemaparan.

Ingat bahawa penggunaan berlebihan "shouldComponentUpdate" boleh membawa kepada isu prestasi jika logiknya terlalu rumit atau melakukan perbandingan yang tidak perlu.

Atas ialah kandungan terperinci ReactJS: Adakah `setState` Sentiasa Mencetuskan Paparan Semula Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!