Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Bahasa Inggris saya terbatas, kemampuan saya biasa-biasa saja, dan saya sangat berpengetahuan. Karena saya bukan seorang penerjemah, ada banyak terjemahan acak. Jika Anda tidak percaya, silakan baca teks aslinya~~

Alamat asli:https://facebook.github.io/react/docs/kinerja-lanjutan.html

---

###Pengoptimalan kinerja

Setiap kali pengembang memilih untuk menggunakan react dalam proyek nyata, pertama-tama mereka akan mengajukan pertanyaan: Apakah penggunaan react akan membuat proyek lebih cepat, lebih fleksibel, dan lebih mudah dikelola. Selain itu, apakah proses rendering ulang antarmuka setiap kali data status berubah menyebabkan hambatan kinerja? Secara internal, React memastikan kinerja dengan menggunakan beberapa teknik halus untuk meminimalkan operasi DOM mahal yang menyebabkan pembaruan UI setiap saat.

####Hindari efek langsung pada DOM
React mengimplementasikan lapisan DOM virtual, yang digunakan untuk memetakan pohon DOM asli browser. Melalui lapisan DOM virtual ini, React dapat menghindari pengoperasian DOM secara langsung, karena kecepatan pengoperasian DOM browser secara langsung jauh lebih rendah daripada pengoperasian objek JavaScript. Setiap kali properti atau status komponen berubah, react akan membuat dom virtual baru di memori dan membandingkannya dengan dom lama asli untuk menentukan apakah pohon dom browser perlu diperbarui, sehingga mengoptimalkan rendering dom sebanyak mungkin. mungkin. kehilangan kinerja.

Selain itu, react menyediakan fungsi siklus hidup komponen.shouldComponentUpdate, komponen akan memanggil fungsi ini sebelum memutuskan untuk merender ulang (setelah perbandingan DOM virtual selesai dan DOM akhir dibuat). Fungsi ini memberi pengembang wewenang untuk merender ulang, dan fungsi tersebut langsung kembali secara defaulttrue, menunjukkan bahwa pembaruan DOM akan dimulai langsung secara default:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

Perlu diperhatikan bahwa react akan sangat sering memanggil fungsi ini, jadi jika Anda berencana mengimplementasikan sendiri logika fungsi ini, harap pastikan performanya semaksimal mungkin.

Misalnya, Anda memiliki aplikasi obrolan dengan banyak postingan. Jika hanya salah satu yang berubah saat ini, jika Anda menerapkan yang berikut inishouldComponentUpdate, react akan menghindari rendering ulang postingan yang tidak berubah sesuai situasi:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

Singkatnya, React sebisa mungkin menghindari operasi DOM yang mahal dan mengizinkan pengembang untuk mengganggu perilaku ini.

####shouldComponentUpdate beraksi
Berikut adalah contoh komponen yang mengandung elemen anak, seperti yang ditunjukkan di bawah ini:

Sebelumnya Berikutnya