React Native Academy · Pelajaran

Pemprofilan dengan Flipper dan React DevTools

Pelajaran 1 daripada 413 langkah

Pemprofilan dengan Flipper dan React DevTools ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Mengapa Pemprofilan Prestasi Penting

Aplikasi React Native boleh mengalami bingkai tercicir, penatalan senarai yang perlahan, masa permulaan yang panjang dan penggunaan memori yang berlebihan — semua ini mengecewakan pengguna. Sebelum mengoptimumkan, Anda mesti mengukur untuk memahami lokasi sebenar kesesakan, bukannya meneka dan membuat perubahan berdasarkan andaian.

Dua alat pemprofilan utama untuk React Native ialah Flipper (platform penyahpepijatan natif) dan React DevTools (yang merangkumi pemprofil komponen). Apabila digunakan bersama, kedua-duanya memberikan gambaran tentang prestasi utas JS serta pepohon pemaparan komponen.

Menyediakan Flipper

Flipper ialah aplikasi desktop oleh Meta yang bersambung kepada aplikasi React Native yang sedang berjalan melalui USB atau rangkaian, lalu memaparkan data penyahpepijatan masa nyata. Muat turunnya daripada fbflipper.com dan pasangkannya pada mesin pembangunan Anda.

Flipper berfungsi terus dengan projek CLI React Native pada peranti fizikal dan simulator. Untuk aplikasi Expo, Anda perlu menggunakan binaan pembangunan (bukan Expo Go). Selepas bersambung, bar sisi Flipper memaparkan pemalam yang tersedia termasuk React DevTools, Pemeriksa Rangkaian, Penyahpepijat Hermes dan Pemeriksa Reka Letak.

Pemalam React DevTools

Pemalam React DevTools dalam Flipper membolehkan Anda memeriksa pepohon komponen dalam masa nyata. Anda boleh memilih mana-mana komponen untuk melihat props, keadaan dan nilai cangkuk semasanya dalam panel kanan. Ini amat berguna untuk menyahpepijat sebab komponen dipaparkan dengan nilai yang tidak dijangka.

Anda juga boleh menggunakan pakej react-devtools kendiri: pasangkannya secara global dengan npm install -g react-devtools, kemudian jalankan react-devtools dan goncangkan peranti Anda untuk membuka menu pembangun dan bersambung.

# Install standalone React DevTools
npm install -g react-devtools

# Start the DevTools server
react-devtools

# In your app, shake the device and tap 'Open Debugger'
# OR in the Metro bundler terminal, press 'd' to open the dev menu

React Profiler: Merakam Pemaparan

Dalam React DevTools, tab Profiler merekodkan komponen yang dipaparkan serta tempoh setiap pemaparan. Klik Record, berinteraksi dengan aplikasi (tatal senarai, taip dalam medan, ketik butang), kemudian klik Stop. Graf nyalaan menunjukkan setiap pemaparan, dengan warna daripada kuning (perlahan) hingga biru (pantas).

Setiap bar dalam graf nyalaan mewakili pemaparan semula komponen. Bar yang lebih tinggi menunjukkan lebih banyak masa digunakan untuk memaparkan komponen. Mengklik bar akan menunjukkan tempoh pemaparan dalam milisaat serta props atau cangkuk yang berubah dan mencetuskan pemaparan semula.

Mengenal Pasti Pemaparan Semula yang Tidak Perlu

Masalah prestasi yang biasa berlaku ialah komponen yang dipaparkan semula walaupun props atau keadaannya sebenarnya tidak berubah. Dalam React Profiler, cari komponen yang muncul dalam setiap bingkai graf nyalaan walaupun pengguna tidak berinteraksi dengannya — komponen ini sesuai untuk pemomenteran.

Anda juga boleh mendayakan pilihan Serlahkan kemas kini dalam React DevTools. Setiap kali komponen dipaparkan semula, komponen itu akan berkelip dengan sempadan berwarna pada skrin. Hijau bermaksud pemaparan pantas, manakala kuning bermaksud perlahan. Jika seluruh skrin berkelip apabila satu butang ditekan, itu menandakan pemaparan semula yang berlebihan.

Pemeriksa Reka Letak dan Tab Rangkaian

Pemeriksa Reka Letak Flipper menunjukkan hierarki paparan natif, serupa dengan Penyahpepijat Paparan iOS atau Pemeriksa Reka Letak Android. Anda boleh mengetik mana-mana elemen dalam pemeriksa untuk menyerlahkannya pada peranti dan memeriksa sifat reka letak natifnya.

Pemeriksa Rangkaian menunjukkan semua permintaan HTTP yang dibuat oleh aplikasi, termasuk pengepala, isi dan respons. Ini berguna untuk mengesan panggilan API berlebihan, titik akhir yang perlahan tanpa dijangka atau pengepala cache yang tersalah konfigurasi sehingga menyebabkan data diambil semula tanpa perlu.

Prestasi Hermes dan Utas JS

React Native menggunakan Hermes, enjin JavaScript yang dioptimumkan untuk peranti mudah alih, sebagai enjin lalai sejak React Native 0.70. Hermes menyusun JavaScript terlebih dahulu kepada kod bait semasa masa binaan, lalu mengurangkan masa permulaan dengan ketara. Penyahpepijat Hermes Flipper membolehkan Anda membuat pemprofilan penggunaan CPU dan memeriksa peruntukan memori dalam timbunan JS.

Untuk membuat pemprofilan prestasi utas JS, gunakan tab Timeline Penyahpepijat Hermes. Rakam satu sesi, kemudian cari tugas JavaScript yang panjang dan menyekat utas UI. Tugas yang melebihi 16ms menyebabkan bingkai tercicir (di bawah 60fps).

Mengukur FPS dengan Pemantau Prestasi

Pemantau Prestasi terbina dalam React Native (boleh dicapai daripada menu pembangun) menunjukkan bingkai sesaat dalam masa nyata. Dua pembilang FPS dipaparkan: FPS JS (kelajuan pelaksanaan JavaScript) dan FPS UI (kelajuan bingkai dipaparkan secara natif).

Sasarannya ialah 60 FPS untuk kedua-duanya. Jika FPS JS menurun tetapi FPS UI kekal tinggi, kesesakan berpunca daripada logik JavaScript. Jika FPS UI menurun sementara FPS JS tinggi, kesesakan berada pada lapisan pemaparan natif — sering disebabkan terlalu banyak Paparan atau bayang-bayang yang kompleks.

Menggunakan console.time untuk Penanda Aras Mikro

Untuk pengukuran pantas bagi operasi tertentu — seperti tempoh memproses respons API atau menapis tatasusunan besar — gunakan console.time dan console.timeEnd. Kedua-duanya tersedia dalam Hermes dan berfungsi dalam konsol Metro/Flipper.

Ini berguna untuk mengenal pasti transformasi data yang mahal dan boleh dialihkan daripada utas JS, dimomenterkan atau dipermudahkan sebelum senarai dipaparkan.

// Measure array sorting performance
console.time('sortPosts');
const sorted = posts.sort((a, b) => b.createdAt - a.createdAt);
console.timeEnd('sortPosts'); // e.g., 'sortPosts: 3.14ms'

// Measure a network call
console.time('fetchUser');
const user = await fetchUserById(userId);
console.timeEnd('fetchUser'); // e.g., 'fetchUser: 245ms'

Mengapa Anda Mengukur Sebelum Mengoptimumkan

Kesilapan yang biasa berlaku ialah menggunakan pemomenteran (React.memo, useCallback, useMemo) di mana-mana sebagai langkah berjaga-jaga. Sebenarnya, tindakan ini menambah kos — pemomenteran menjalankan fungsi perbandingan pada setiap pemaparan, dan bagi komponen mudah, kos perbandingan mungkin lebih tinggi daripada pemaparan semula.

Peraturannya ialah: buat pemprofilan dahulu, kemudian optimumkan bahagian yang menunjukkan kesesakan sebenar. Panel Why did this render? React Profiler memberitahu props atau cangkuk tepat yang berubah bagi setiap komponen, supaya Anda tahu dengan tepat perkara yang perlu dimomenterkan.

Pemantauan Prestasi dalam Produksi

Pemprofilan pembangunan dengan Flipper hanya menunjukkan prestasi pada mesin Anda. Untuk mendapatkan cerapan produksi, integrasikan alat pemantauan prestasi seperti Firebase Performance Monitoring atau Sentry Performance. Alat ini mengumpulkan metrik pengguna sebenar termasuk masa permulaan aplikasi, tempoh pemaparan skrin dan kependaman permintaan HTTP.

Gunakan perf().startTrace('my-operation') daripada Firebase Performance untuk mengukur aliran tertentu dan melihat data masa yang dipecahkan mengikut negara, peranti dan versi aplikasi dalam konsol Firebase.

import perf from '@react-native-firebase/perf';

async function loadFeed() {
  const trace = await perf().startTrace('load_feed');

  try {
    const data = await fetchFeedData();
    setFeed(data);
    trace.putMetric('item_count', data.length);
  } finally {
    await trace.stop(); // Records duration to Firebase
  }
}

Semakan Pantas

Uji pemahaman Anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Dalam pelajaran ini, Anda telah mempelajari: cara menggunakan Flipper dan React DevTools Profiler untuk merekod pemaparan komponen, cara mengenal pasti pemaparan semula yang tidak diperlukan menggunakan tindanan Highlight Updates, dan sebab Anda hendaklah sentiasa membuat pengukuran dengan alat pemprofilan sebelum menggunakan pengoptimuman. Seterusnya, kita akan menggunakan teknik pemoinan dengan React.memo, useCallback dan useMemo untuk menghapuskan kesesakan yang telah kita temui.

Percuma untuk bermula

Pelajari JavaScript 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: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemprofilan dengan Flipper dan React DevTools” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Pemprofilan dengan Flipper dan React DevTools”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemprofilan dengan Flipper dan React DevTools”?

Sambungkan Flipper kepada aplikasi yang sedang berjalan, gunakan pemalam React DevTools untuk memeriksa pepohon komponen, rekod jejak pemaparan, dan kenal pasti komponen yang dipaparkan semula tanpa… Anda berlatih React Native 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 Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native 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 1 daripada 4.

Berapa lamakah pelajaran “Pemprofilan dengan Flipper dan React DevTools” 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 Native Academy ini?

Ya. Setiap pelajaran React Native 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

Pemprofilan dengan Flipper dan React DevTools
Memoisasi dengan React.memo, useCallback dan useMemo
Penalaan Prestasi FlatList
Saiz Himpunan dan Pemuatan Malas

← Kembali ke React Native Academy