React: Fungsi kinerja rekonsiliasi vs. komponen kelas
Apakah Anda ingin meminta fitur atau melaporkan bug ?
tidak ada/bug
Apa perilaku saat ini?
Saat memigrasi komponen kelas ke komponen yang berfungsi (dengan kait), saya melihat penurunan kinerja yang signifikan . Saya memiliki komponen (disebut TreeNodeComponent ) yang merupakan bagian dari struktur pohon. Bergantung pada ukuran pohon, ratusan instance dapat terlihat.
Membungkus komponen fungsi dalam PureComponent secara signifikan mengurangi "waktu render" yang diamati. (Dari ~160ms hingga ~60ms)
"Waktu render", diamati di Alat Pengembang Chrome
Konteks:
Aplikasi merender ratusan TreeNodeComponent dalam tree-structure . Ketika orang tua diperbarui, semua anak langsung perlu direkonsiliasi.
Proyek: https://github.com/thomasnordquist/MQTT-Explorer
Apa perilaku yang diharapkan?
Kinerja yang sebanding antara komponen fungsional dan kelas.
Versi React yang mana, dan browser/OS mana yang terpengaruh oleh masalah ini?
OSX
Kromium 73 / Elektron 5.0.5
Bereaksi 16.8
TypeScript & Webpack
thomasnordquist
Semua 3 komentar
Membungkus komponen fungsi dalam PureComponent secara signifikan mengurangi "waktu render" yang diamati. (Dari ~160ms hingga ~60ms)
Itu yang diharapkan jika rendering TreeNodeComponent mahal. React.PureComponent bail out lebih awal jika props tidak berubah.
Saat memigrasikan komponen kelas ke komponen yang berfungsi (dengan kait), saya melihat penurunan kinerja yang signifikan.
Apakah Anda mengatakan bahwa beralih dari kelas yang memperluas React.Component ke komponen fungsi menyebabkan regresi kinerja? Atau apakah Anda sudah menggunakan React.PureComponent (atau shouldComponentUpdate )
Anda dapat menggunakan React.memo untuk mendapatkan semantik bailout yang sama dengan komponen fungsi.
aweary
pada 11 Jul 2019
Saya bermigrasi dari React.Component dengan shouldComponentUpdate .
Saya menggunakan React.useMemo untuk menghindari "rendering".
React.memo menghasilkan hasil sebaik yang dari PureComponent . (~50-60ms)
Terima kasih banyak untuk mengklarifikasi.
thomasnordquist
pada 11 Jul 2019
Saya tidak mendapatkan mana yang lebih baik: komponen fungsional atau komponen kelas. Apa yang harus saya gunakan untuk daftar panjang?
TheMisir
pada 27 Nov 2019
Masalah terkait
tleunen
·
3Komentar
kocokolo
·
3Komentar
DimitarChristoff
·
3Komentar
huxiaoqi567
·
3Komentar
krave1986
·
3Komentar
Komentar yang paling membantu
Itu yang diharapkan jika rendering
TreeNodeComponentmahal.React.PureComponentbail out lebih awal jika props tidak berubah.Apakah Anda mengatakan bahwa beralih dari kelas yang memperluas
React.Componentke komponen fungsi menyebabkan regresi kinerja? Atau apakah Anda sudah menggunakanReact.PureComponent(ataushouldComponentUpdate)Anda dapat menggunakan
React.memountuk mendapatkan semantik bailout yang sama dengan komponen fungsi.