React Academy · Pelajaran

Menggunakan Tab Profiler

Rakam paparan, baca graf nyalaan dan kenal pasti komponen perlahan.

Pelajaran 3 daripada 413 langkah

Menggunakan Tab Profiler ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Selamat Datang

Dalam pelajaran ini, anda akan menggunakan Pemprofil React DevTools untuk merakam pemaparan, membaca graf nyalaan dan mengenal pasti komponen yang menyebabkan kesesakan prestasi.

Membuka Pemprofil

Klik tab **Pemprofil** dalam React DevTools (di sebelah Komponen). Anda akan melihat butang Rakam (bulatan) dan butang Muat Semula dan Profil. Pemprofil hanya berfungsi dalam mod pembangunan.

Merakam Sesi

Klik **Rakam** (bulatan), berinteraksi dengan aplikasi anda (contohnya, klik butang atau taip dalam medan masukan), kemudian klik **Berhenti** (segi empat sama). DevTools merekod setiap pemaparan yang berlaku sepanjang sesi.

Membaca Graf Nyalaan

Graf nyalaan menunjukkan satu bar bagi setiap komponen dalam setiap komit. Lebar = masa yang dihabiskan untuk memaparkan komponen. Tindanan yang tinggi = pepohon komponen yang mendalam. Arahkan penunjuk ke atas bar untuk melihat nama komponen dan tempoh pemaparan yang tepat.

Garis Masa Komit

Di bahagian atas Pemprofil, anda akan melihat satu barisan bar kecil — satu untuk setiap komit React. Bar yang lebih tinggi mewakili komit yang lebih perlahan. Klik bar untuk beralih ke graf nyalaan bagi komit tersebut.

Mengapa Komponen Dirender?

Pilih komponen dalam graf nyalaan dan lihat bahagian **Mengapa ini dirender?**. Bahagian ini menunjukkan sama ada komponen dirender kerana sifat berubah, keadaan berubah atau komponen induk dirender semula.

Bar Kelabu berbanding Bar Berwarna

Bar kelabu bermaksud komponen tidak dirender dalam komit ini (React menggunakan semula keluaran sebelumnya). Bar berwarna bermaksud komponen itu dirender semula — warna yang lebih gelap menunjukkan masa render yang lebih lama.

Paparan Carta Berperingkat

Tukar daripada Graf Nyalaan kepada carta **Berperingkat** (togol di bahagian atas). Carta ini menyenaraikan semua komponen yang dirender, diisih berdasarkan masa render, supaya anda dapat mengenal pasti komponen paling perlahan dengan segera.

Rakam dan Muat Semula

Klik **Muat Semula dan Profil** dan bukannya Rakam untuk menangkap pemuatan halaman termasuk render awal. Ini membantu anda mencari komponen yang perlahan semasa pemasangan pertama.

Mendayakan Pemprofilan dalam Produksi

Binaan produksi melumpuhkan pemprofil secara lalai. Untuk memprofil produksi, bina aplikasi dengan `react-dom/profiling` sebagai alias dan `scheduler/tracing-profiling`. Kebanyakan pasukan memprofil dalam pembangunan terlebih dahulu.

Semakan Pantas

Dalam graf nyalaan pemprofil React DevTools, apakah yang diwakili oleh lebar sesuatu bar?

Jawab dalam pelajaran interaktif

Rumusan

Kini anda boleh merakam sesi pemprofil, membaca graf nyalaan dan carta berperingkat, menyemak sebab komponen dirender semula, serta menggunakan garis masa komit untuk berpindah antara render.

Seterusnya

Pelajaran seterusnya: **Menyahpepijat Ralat React Biasa** — anda akan mendiagnosis amaran kunci yang hilang, pepijat keadaan tidak ditakrifkan dan ketidakpadanan hidrasi menggunakan DevTools serta konsol pelayar.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menggunakan Tab Profiler” percuma?

Ya — teks penuh “Menggunakan Tab Profiler” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menggunakan Tab Profiler”?

Rakam paparan, baca graf nyalaan dan kenal pasti komponen perlahan. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Menggunakan Tab Profiler” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy