React: Devtools V4: Di mana Pembaruan Sorotan?

Masalah yang sama di sini. Pembaruan Sorotan telah hilang.
Saya bertanya-tanya apakah seseorang harus menggunakan Profiler sekarang, untuk melacak pembaruan?

https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex1r9nb/

Jawaban jujurnya adalah kami tidak punya waktu untuk mengimplementasikannya, dan tidak menganggapnya cukup penting untuk memblokir semua fitur lain agar tidak dirilis.

Namun, ada alasan yang lebih dalam mengapa kami tidak yakin kami akan menambahkannya kembali. Ini berkontribusi pada gagasan yang salah bahwa rendering ulang sendiri itu buruk (tidak jika harganya murah). Jadi orang menghabiskan waktu untuk mengoptimalkan hal-hal yang tidak berguna dan melewatkan masalah kinerja yang sebenarnya.

DevTools baru menyertakan Profiler yang akan membantu Anda menemukan masalah kinerja aktual dalam kode Anda. Saya memahami keinginan akan cara super ringan untuk menemukan render tambahan — dan mungkin kami akan menambahkannya — tetapi kami harus lebih memikirkan cara kerjanya terlebih dahulu.

Diedit untuk menambahkan komentar sebaris

Beberapa diskusi sebelumnya terkait https://github.com/bvaughn/react-devtools-experimental/issues/244

Pembaruan Sorotan sangat berguna bukan untuk memperbaiki masalah kinerja (Profiler baru jauh lebih baik dalam hal itu), tetapi untuk menemukan render yang mengejutkan. Ini telah menyelamatkan kami berkali-kali terutama ketika bekerja dengan Konteks di mana satu perubahan dapat menyebabkan rendering ulang di bagian lain dari aplikasi. Saat mengerjakan Profiler, Anda cenderung hanya fokus pada sebagian pohon, sehingga regresi mudah terlewatkan.

Saya mengerti kekhawatiran @gaearon tentang memberikan ide yang salah, jadi bagaimana dengan:

1. Pilih warna outline berdasarkan durasi render

Render murah harus hijau, render mahal harus kuning atau merah. Atau gunakan saja warna yang sama persis dengan yang digunakan oleh Profiler.

2. Variasikan kecepatan fade garis besar

Garis animasi fade harus relatif terhadap durasi render. Render cepat harus segera memudar, render lambat harus memudar lebih lambat.

3. Bedakan area yang dicat ulang

Saya terkadang menggunakan Highlight Updates dengan Chrome Paint Flashing . Ini membuat render yang menyebabkan pengecatan ulang disorot secara berbeda dari render yang tidak memiliki efek DOM. Saya pikir DevTools harus memiliki fungsi bawaan yang serupa.

• Render mahal tanpa pengecatan ulang harus menjadi target utama untuk pengoptimalan kinerja.
• Render yang mengecat ulang jelas melakukan beberapa pekerjaan yang perlu dilakukan.
• Render cepat yang menghasilkan tanpa pengecatan ulang boleh diabaikan.

Bahkan mungkin memiliki pengaturan yang hanya mem-flash yang pertama di atas (dengan beberapa ambang yang dapat dikonfigurasi).

Mengidentifikasi render "murah" atau "cepat" tidak semudah kelihatannya, karena faktor-faktor seperti:

• Pembangunan pembangunan jauh lebih lambat daripada pembangunan produksi.
• Laptop pengembang umumnya jauh lebih cepat daripada laptop pengguna akhir.

Hal yang menyenangkan tentang Profiler adalah ia melaporkan kecepatan sebagai relatif, memungkinkan Anda fokus pada bagian paling lambat dari aplikasi dalam sesi apa pun. (Anda harus memutuskan kapan bagian paling lambat cukup cepat.) Ini hanya dapat dilakukan dalam retrospeksi.

Ini juga memberi Anda snapshot statis dari komit, dan props/status mana yang berubah, memungkinkan Anda melihat tidak hanya seberapa sering komponen tertentu dirender (apakah lebih dari yang Anda harapkan?) dirender ulang dengan itu.

Saya pikir ada peluang bagus untuk menambahkan semacam mekanisme flashing pembaruan kembali ke DevTools sebagai bagian dari Profiler. Mungkin berkedip (seperti dulu) hanya ketika profil aktif? Mungkin itu mem-flash setiap komponen yang dirender ulang ketika Anda memilih komit baru di profiler setelah pembuatan profil berhenti? (Saya agak menyukai ide itu, karena memungkinkan Anda "memutar ulang" jika Anda melewatkan sesuatu.) Kita perlu sedikit bereksperimen dengannya dan melihat mana yang paling berhasil.

Saya sering menggunakan fitur ini untuk memastikan bahwa hanya komponen yang harus dirender yang dirender. Saya memiliki aplikasi yang merender komponen yang sama, berkali-kali, dengan id yang berbeda, dan saya ingin memastikan bahwa hanya satu yang perlu dirender yang merender, bukan semuanya. Saya tidak melihat cara untuk memeriksa ini dengan profiler baru.

Saya tidak melihat cara untuk memeriksa ini dengan profiler baru

Apa yang sudah kamu coba? Profiler harus dengan jelas menunjukkan apakah satu anak sedang merender ulang atau banyak.

Saya sering menggunakan 'Soroti pembaruan'. Itu adalah fitur dev-tools yang paling sering saya gunakan. Hanya untuk melihat apa yang diperbarui, bukan seberapa sering. Tentu, Anda dapat menggunakan profiler untuk melakukan ini, tetapi itu jauh lebih rumit daripada memiliki indikasi visual yang cepat.

Bagi saya, "Soroti pembaruan" adalah "fitur pembunuh" ...

Kami mendengar Anda :-) Saya tidak berpikir komentar lebih lanjut hanya mengatakan "Saya menggunakan ini" akan sangat membantu di utas ini, untuk apa nilainya. Kami tahu ada orang yang menggunakan fitur ini, dan sedang memikirkan cara yang tepat untuk mengembalikannya. Terima kasih atas tanggapannya!

Opsi ini merupakan komponen penting untuk proses kerja harian saya untuk menunjukkan masalah rerender secara instan. Jadi saya akan sangat senang, jika Anda dapat segera mengembalikan fitur luar biasa ini.

+1 untuk mengembalikan beberapa versi fitur ini yang memungkinkan tampilan tingkat tinggi yang cepat dari perenderan ulang (bahkan untuk perenderan ulang yang benar-benar baik seperti ketika kami memperbarui Konteks).

+1 untuk membawa kembali

Jadi saya akan sangat senang, jika Anda dapat segera mengembalikan fitur luar biasa ini.

Seperti yang diminta di atas:

Saya tidak berpikir komentar lebih lanjut hanya mengatakan "Saya menggunakan ini" akan sangat membantu

Untuk mengulangi ini lebih eksplisit:

Kami mendengarmu!

Ada banyak orang yang berlangganan repositori ini. Kami tidak ingin mengirim spam kepada mereka dengan komentar yang sama setiap beberapa jam. Selain itu, kami secara pribadi menggunakan notifikasi GitHub. Jika utas ini bertemu setiap hari dengan "+1", kami akhirnya harus berhenti berlangganan untuk mengurangi kebisingan. Yang mungkin kebalikan dari niat Anda.

Sebelum berkomentar, pastikan Anda menambahkan sesuatu yang belum pernah dikatakan sebelumnya. Jika Anda melihat komentar yang mirip dengan apa yang ingin Anda tulis, tambahkan saja reaksi 👍.

Terima kasih atas pengertian.
Kami menghargai umpan balik Anda, tetapi 👍s sudah cukup untuk membantu memprioritaskan tugas.

bahwa Anda menambahkan sesuatu yang tidak dikatakan sebelumnya.

Saya ingin bertanya, apakah ada cara untuk menginstal versi ekstensi sebelumnya? Sebenarnya, pembaruan itu merusak aliran, yang biasa saya lakukan. Sayangnya, pasar ekstensi Chrome tidak mengizinkan Anda untuk menginstal versi sebelumnya seperti 'npm'. Apakah Anda memiliki tautan dengan ekstensi yang dikompilasi? Terima kasih.
_ (Saya mencoba untuk menginstal versi standalone, tapi ini link dari v3 repo rusak, link Crome ekstensi mengarah ke versi terbaru) _

DevTools baru menyertakan Profiler yang akan membantu Anda menemukan masalah kinerja aktual dalam kode Anda.

Dan inilah jawabannya, mengapa ekstensi baru merusak aliran saya. Profiler mendorong Anda untuk menekan tombol untuk memulai, lalu untuk mengakhiri pembuatan profil, tetapi ini tidak instan. Dengan penyorot pembaruan, Anda melihat semuanya tanpa gerakan ekstra. Ini juga menunjukkan kepada Anda dengan cara yang sangat intuitif pembaruan aktual, dan apa yang sebenarnya telah dipicu.

Ini mengingatkan saya pada monitor kinerja Chrome DevTools sendiri yang juga digunakan untuk memperbarui langsung dan kemudian suatu hari nanti dimigrasikan ke press-to-record . Langkah itu mungkin masuk akal karena kerumitan dan dampak pada kinerja, tetapi intinya adalah bahwa itu menambah gesekan yang sangat besar (seperti yang ditunjukkan @Carduelis , jauh lebih mudah untuk tidak menekan tombol start/stop). Ini membuat kunci ke loop OODA , dan tidak diragukan lagi akan mempengaruhi seberapa sering pengguna menggunakan fitur ini, dan pada gilirannya mempengaruhi kualitas aplikasi itu sendiri.

Jangan mengambil ini dengan cara yang salah --- monitor perf baru itu keren dan memiliki kegunaannya saat Anda perlu menggali lebih dalam, tetapi itu tidak bisa begitu saja menggantikan visualisasi cepat & kotor seperti penyorotan pembaruan lama.

Saya ingin bertanya, apakah ada cara untuk menginstal versi ekstensi sebelumnya?

@Carduelis Instruksi penginstalan untuk versi DevTools sebelumnya tercakup dalam posting blog rilis: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get- versi-lama-kembali

Saya berlari berputar-putar sedikit mencoba menginstal v3 di Chrome dari instruksi di atas, dan tidak bisa membuat profiler mandiri untuk menyorot perubahan. Jadi saya membuat petunjuk langkah demi langkah terperinci jika Anda hanya ingin membuatnya berfungsi dan kembali mengoptimalkan komponen Anda:

Menginstal React Dev Tools V3 (petunjuk langkah demi langkah) :
https://Gist.github.com/oztune/01be16a2f90283aad82422b37221d522

Jika saya boleh mengoceh sedikit, sementara pada tingkat teknis itu mungkin tampak seperti "alat profiling mendalam"> "fitur penyorotan yang konyol", kita semua hanyalah manusia dan kita mengumpulkan banyak informasi dengan cepat dari isyarat visual sederhana, jadi dalam beberapa hal fitur penyorotan adalah masalah yang cukup besar karena sangat mudah digunakan. Bagi saya itulah alasan saya membuka React Dev Tools 90% dari waktu.

Jika saya boleh mengoceh sedikit, sementara pada tingkat teknis itu mungkin tampak seperti "alat profiling mendalam"> "fitur penyorotan yang konyol", kita semua hanyalah manusia dan kita mengumpulkan banyak informasi dengan cepat dari isyarat visual sederhana, jadi dalam beberapa hal fitur penyorotan adalah masalah yang cukup besar karena sangat mudah digunakan.

Saya tidak berpikir Dan atau saya telah memperdebatkan bahwa itu "lebih mudah digunakan", hanya saja itu mungkin mendorong orang untuk menginvestasikan waktu dalam "memperbaiki" hal-hal yang tidak "rusak" (alias terlalu mengoptimalkan hal-hal yang tidak lambat) . Kami telah melihat pola ini sebelumnya dengan hal-hal seperti penghindaran luas fungsi inline karena biaya "kinerja" yang ditakuti. Energi yang diinvestasikan dalam memperbaiki non-masalah adalah energi yang tidak dihabiskan untuk memperbaiki hal-hal lain yang berpotensi lebih penting.

Seperti yang kami katakan di atas , saya pikir ada peluang bagus untuk menambahkan semacam mekanisme flashing pembaruan kembali ke DevTools sebagai bagian dari Profiler.

Secara realistis itu bukan hal prioritas tertinggi di piring saya, jadi saya akan meminta kesabaran daripada mengulangi percakapan ini. Kami mendengar dan mengakui bahwa fitur ini penting. Kami akan mencoba mempertimbangkan kenyamanan terhadap pertimbangan lain yang disebutkan di atas dan menghasilkan sesuatu yang lebih dari apa yang kami miliki saat ini.

Sampai-sampai tentang pengoptimalan yang berlebihan, saya dapat membuktikan bahwa penyorotan render visual dapat mendorong hal itu. Oleh karena itu, saya ingin menambahkan sesuatu untuk diskusi di sini.

Bagi mereka yang melewatkan fitur ini, Anda dapat menemukan https://github.com/welldone-software/why-did-you-render lebih informatif.

Ini mungkin sesuatu yang perlu dipertimbangkan ketika fitur ini diterapkan. Secara default, WhyDidYouRender melakukan perbandingan nilai yang mendalam dan hanya melaporkan ketika hal-hal tidak benar-benar berubah di antara rendering ulang. Akan sangat bagus untuk memiliki pemfilteran yang sama pada sorotan render visual. Ini akan mengarahkan pengoptimalan yang lebih bijaksana (ditambah itu adalah perbedaan yang tidak diberikan oleh profiler).

Secara teori, seharusnya memungkinkan untuk merender ulang seluruh aplikasi tanpa memperhatikan kinerja sehingga menambahkan SCU di mana-mana untuk menghindari melihat penyorotan render adalah jalur yang kontraproduktif.

Saya masih menemukan sorotan rerender berguna untuk demonstrasi tentang cara kerja React.

Secara default, WhyDidYouRender melakukan perbandingan nilai yang mendalam dan hanya melaporkan ketika hal-hal tidak benar-benar berubah di antara rendering ulang.

Ini terdengar sangat lambat untuk aplikasi yang sebenarnya memiliki masalah kinerja. Segala jenis perbandingan mendalam tentu bukan sesuatu yang ingin selalu kami lakukan. Ketika Anda menyalakannya (untuk memilih performa yang lebih lambat), mengapa tidak memulai Profiler saja?

Ini akan mengarahkan pengoptimalan yang lebih bijaksana (ditambah itu adalah perbedaan yang tidak diberikan oleh profiler).

Profiler memang menyediakan versi ini:

Jika Anda melihat komponen yang dirender ulang, tetapi tidak memiliki alat peraga/status/kait yang berubah, menurut saya itulah yang Anda gambarkan.

@bvaughn Yah, Anda biasanya hanya mengaktifkan perbandingan mendalam pada satu komponen pada satu waktu. Jadi saya setuju itu bukan sesuatu yang Anda aktifkan untuk semua komponen secara default. Mungkin sesuatu di mana Anda mengklik kanan bilah hijau itu dan memilih "sorot pembaruan render".
Itu cukup apik dan sangat berguna, tetapi itu adalah sesuatu yang harus Anda gali.

@bvaughn Saya suka "Mengapa ini dirender?" fitur (sementara Highlight Updates mendapat pemikiran ulang), tetapi setelah membaca semua dokumentasi yang tersedia dan membaca sekilas tutorial youtube Anda, saya masih tidak yakin bagaimana menafsirkannya untuk beberapa kasus:

Tidak intuitif apa artinya garis bawah:

Mengapa ini dirender?

• alat peraga berubah: (__)

Saya hanya menggunakan kait api, tetapi masih belum yakin artinya:

Mengapa ini dirender?

• Kait berubah

Adakah kemungkinan ada satu atau dua kalimat penjelasan untuk kasus-kasus ini dan mungkin yang lain yang belum saya temui selain kasus yang jelas di mana ia mencantumkan props aktual / state yang berubah?

Tidak intuitif apa artinya garis bawah:

Sepertinya ada sesuatu di aplikasi Anda yang meneruskan prop bernama __ dan prop itu berubah di antara komit 😄

Saya hanya menggunakan api kait, tetapi masih belum yakin artinya

Silakan lihat #16477

Hai

Saya sering menggunakan Pembaruan Sorotan. Saya sedang mengembangkan aplikasi yang sering menyegarkan dan masa depan itu penting bagi saya untuk pekerjaan saya sehari-hari.

Saya mendapatkan solusi yang disajikan @bvaughn . Ini sangat berguna tetapi saya tidak dapat menerapkannya pada skenario saya karena kecepatan refresh. Saya memerlukan indikasi cepat daripada alat profil, yang terlihat luar biasa BTW.

Apakah Anda masih akan menerapkan ini kembali?? Jika tidak, bagaimana saya bisa menurunkan React Dev Tools saya, karena saya tidak bisa berkembang tanpanya.

Apakah Anda masih akan menerapkan ini kembali?? Jika tidak, bagaimana saya bisa menurunkan React Dev Tools saya, karena saya tidak bisa berkembang tanpanya.

Sudah dijawab oleh @oztune.

Bagaimana cara mengembalikan versi lama?
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the-old-version-back

Saya ingin versi lama kembali silakan. Ada begitu banyak fungsi yang hilang di yang baru dan itu sangat tidak membantu

Saya ingin versi lama kembali silakan. Ada begitu banyak fungsi yang hilang di yang baru dan itu sangat tidak membantu

Inilah cara mengembalikan versi lama, bekerja untuk saya:
https://Gist.github.com/oztune/01be16a2f90283aad82422b37221d522

HI @einarq sebenarnya saya ingin memiliki fungsionalitas yang hilang di Versi baru. Saya melihat banyak hal baru yang bagus tetapi beberapa yang lama sangat penting dan saya tidak mengerti dengan cara menghapusnya. Untuk memeriksa perenderan sekarang, saya menempatkan log konsol di fungsi render untuk mengetahui apakah saya mengurangi sejumlah perenderan atau tidak. Ini tidak ideal tetapi berhasil. Versi sebelumnya membuat ini sangat mudah dan membantu karena itu juga menunjukkan kepada saya perenderan lain yang tidak dibutuhkan yang dapat saya temukan. Sekarang, ini hanya menyakitkan.

Harap kembalikan fungsionalitas yang hilang itu ke versi baru.

Menurut saya Versi baru berarti Anda memiliki: desain ulang dan peningkatan versi lama dan masa depan baru ditambahkan. Tidak dihapus dan menambahkan fungsionalitas baru yang berbeda dari yang sebelumnya.

Juga mengapa saya sekarang tidak dapat mengubah nilai status ??

Dan props Boolean bukan kotak centang lagi ?? Itu sangat keren. Dan lagi pergi.

Sekarang status tidak dapat diubah dan alat peraga saya harus mengetikkan false/true itu sebagai gantinya cukup klik dan lihat bagaimana komponen bereaksi terhadap ini.

Sangat mengganggu.

Hai @PMustard ,

Saya tidak mengerjakan ini, saya hanya menyarankan satu pendekatan potensial untuk mengembalikan versi lama dari dev-tools jika Anda tidak menyukai yang baru. Itu berhasil untuk saya.

Saya yakin bahwa tim yang mengerjakan alat pengembang (terutama Brian Vaughn saya kira?) Akan mempertimbangkan kekhawatiran Anda jika Anda membuat beberapa masalah terpisah untuk mereka.

Dan jangan lupa untuk menunjukkan beberapa penghargaan juga. Kami mendapatkan alat ini secara gratis :)
Umpan balik yang konstruktif saja.

Salam,

Einar

Jika Anda sangat membutuhkan fitur ini, Anda dapat menggunakan versi lama sebagai solusinya: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the -versi-lama-kembali. Saya juga mendorong Anda untuk mencoba menggunakan Profiler. Meskipun sedikit lebih banyak upaya untuk dijalankan, ini memberi tahu Anda rendering ulang mana yang penting dan mana yang tidak. Hanya menghitung angka render sering kali menjadi gangguan dari masalah kinerja yang sebenarnya.

Kami memahami bahwa memiliki cara yang mudah untuk menemukan perenderan yang tidak terduga sangat berharga. Kami telah menjelaskan di https://github.com/facebook/react/issues/16437#issuecomment -523629000 bahwa ini ada di radar kami dan lebih banyak komentar yang mengatakan "Saya membutuhkan ini" tidak membantu. Karena utas ini terus mengumpulkan komentar "Saya membutuhkan ini", saya akan menguncinya untuk mengurangi banjir notifikasi. Harap yakinlah bahwa suara Anda didengar.

Saya telah menerapkan fitur ini di DevTools baru (#16989) dengan peringatan berikut:

• Ini hanya diaktifkan di ekstensi browser (dan paket react-devtools-inline NPM) untuk saat ini, jadi hanya mendukung React DOM.
• Ini tidak diterapkan untuk perender lawas (v15) meskipun dapat ditambahkan oleh seseorang jika mereka ingin mengirimkan PR tindak lanjut.

Menutup masalah ini sekarang setelah #16989 mendarat. Kemungkinan akan merilis 4.2 dengan fitur baru hari ini.