ReactJS - Adakah Render Mencetuskan Setiap Panggilan "setState"?
React mengekalkan perbezaan antara DOM mayanya dan DOM asli. Apabila komponen menerima kemas kini keadaan, kaedah pemaparannya digunakan. Ini menjana perwakilan DOM maya baharu bagi komponen tersebut. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa React tidak mengemas kini DOM asli dengan serta-merta.
Gelagat Lalai: Paparan semula pada Setiap Kemas Kini Negeri
Secara lalai, React menganggap bahawa sebarang perubahan keadaan memerlukan pemaparan semula UI. Ini memastikan antara muka pengguna sentiasa disegerakkan dengan keadaan terkini.
Rendering DOM Maya lwn. Rendering DOM Asli
Apabila render dilaksanakan, ia menjana yang baharu DOM maya. Fasa ini tidak menjejaskan DOM asli. Selepas itu, React membandingkan DOM maya baharu dengan yang sebelumnya dan hanya mengemas kini elemen sebenar dalam penyemak imbas yang telah berubah. Pengoptimuman ini menghalang pemaparan semula yang tidak perlu dan meminimumkan pengaliran semula dan pengecatan semula penyemak imbas.
Bolehkah saya Mengoptimumkan pemaparan Semula?
Anda boleh melaksanakan kaedah kitaran hayat shouldComponentUpdate untuk memperhalusi apabila komponen dipaparkan semula. Ia memerlukan dua hujah:
Anda boleh gunakan shouldComponentUpdate untuk menyemak sama ada prop dan keadaan yang akan datang berbeza dengan ketara daripada yang semasa. Jika tidak, anda boleh mengembalikan palsu untuk mengelakkan pemaparan semula dan meningkatkan prestasi.
Contoh
Dalam contoh yang disediakan, kedua-dua komponen ibu bapa dan anak dipaparkan semula pada setiap klik, walaupun keadaan dalam komponen induk kekal tidak berubah. Ini kerana setState sentiasa mencetuskan pemaparan semula DOM maya dan React menganggap bahawa UI mesti dikemas kini. Untuk mengelakkan pemaparan semula yang tidak perlu dalam senario sedemikian, anda boleh melaksanakan shouldComponentUpdate untuk menyemak sama ada keadaan sebenarnya telah berubah.
Atas ialah kandungan terperinci Adakah Setiap Panggilan `setState` Mencetuskan Reaksi Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!