Cara menggunakan alat pengembang untuk menyelesaikan masalah kinerja reaksi – Beragampengetahuan

Aplikasi reaksi kadang -kadang dapat mengalami masalah kinerja karena pemasangan ulang yang tidak perlu dan manajemen negara yang tidak efisien. Untungnya, ada beberapa alat yang dapat membantu pengembang menganalisis dan mengoptimalkan kinerja komponen reaktif. Artikel ini akan mencakup tiga alat dasar: React Profiler, WhyDidyroender, dan Usetrackedeft, memberikan wawasan tentang cara kerjanya dan bagaimana mereka dapat diintegrasikan ke dalam proyek Anda.

1. Profiler Reaksi: Mengukur Kinerja Rendering Komponen

ini React Profiler adalah alat bawaan yang membantu pengembang mengukur kinerja aplikasi reaktif. Ini melacak waktu rendering komponen, frekuensi penjangkauan ulang, dan biaya yang terkait dengan rendering, memungkinkan pengembang untuk mengidentifikasi hambatan kinerja.

Untuk menggunakan Profiler React, gunakan <Profiler> Elemen:

1 <Profiler id="App" onRender={onRender}>  
2   <App />  
3 </Profiler>

onRender adalah fungsi panggilan balik yang bereaksi setiap kali pohon komponen diperbarui. Ini memberikan parameter berikut:

• PENGENAL: Tentukan bagian UI yang diukur.
• panggung: Menunjukkan apakah komponen diinstal atau diperbarui.
• Penggunaan aktual: Waktu yang diperlukan untuk membuat komponen.
• Basis: Perkirakan waktu untuk merender ulang subtree tanpa optimasi.
• Waktu mulai: Cap waktu di awal rendering.
• Komite: Render cap waktu.

menggunakan actualDuration Tentukan kapan terlalu lama untuk diterjemahkan. Jika melebihi 16 ms, itu mungkin menunjukkan masalah kinerja.

2. Whydidyourendender: memahami pelepasan yang tidak perlu

Whydidyourendender Adalah utilitas yang membantu melacak penjangkauan ulang yang tidak perlu dalam komponen reaksi. Ini memberikan informasi terperinci tentang mengapa komponen dirender ulang, termasuk komponen atau perubahan status yang memicu render ulang. Alat ini sangat berguna untuk mengoptimalkan kinerja ketika komponen dirender ulang secara tidak perlu.

Integrasi WhyDidyourender ke dalam proyek vite:

1. Instal paket:

npm instal @welldone-software/why-did-you-render -d

2. Ubah Anda vite.config.js:

1 export default defineConfig({
2   plugins: [
3     react({
4       jsxImportSource: "@welldone-software/why-did-you-render",
5     }),
6   ],
7 });

3. Buat a wdyr.js dokumen:

1 import React from "react";
2 import whyDidYouRender from "@welldone-software/why-did-you-render";
3 
4 whyDidYouRender(React, {
5   trackAllPureComponents: true,
6   trackHooks: true,
7   collapseGroups: true,
8 });

4. Impor wdyr.js File dalam file main.jsx:

Opsi Konfigurasi Utama di WhyDidyourender:

• include: Menentukan komponen berdasarkan penelusuran ekspresi reguler.
• trackHooks: Jika diaktifkan, lacak semua perubahan react hook.
• logOwnerReasons: Merekam komponen induk yang menyebabkan rendering ulang.

Untuk memicu komponen logging, atur whyDidYouRender realitas:

1 Component.whyDidYouRender = true;

3. USETRACKEDEFT: Tangani perubahan keadaan efektif

Hook UsetRackedEffect dirancang untuk melacak perubahan keadaan dan melakukan efek samping hanya jika perlu, sehingga meningkatkan kinerja standar useEffect.

contoh:

1 import React, { useState } from 'react';
2 import { useTrackedEffect } from '../hooks';
3 
4 export default () => {
5   const [count, setCount] = useState(0);
6   const [count2, setCount2] = useState(0);
7 
8   useTrackedEffect(
9     (changes) => {
10       console.log('Changed dependencies: ', changes);
11     },
12     [count, count2],
13   );
14 
15   return (
16     <div>
17       <p>Count: {count}</p>
18       <button onClick={() => setCount(count + 1)}>Increment</button>
19       <p>Count2: {count2}</p>
20       <button onClick={() => setCount2(count2 + 1)}>Increment</button>
21     </div>
22   );
23 };

Dalam contoh di atas useTrackedEffect Deteksi dependensi (mis. count atau count2) telah diubah dan direkam untuk membantu menghindari efek samping yang tidak perlu.

sebagai kesimpulan

Dengan memanfaatkan tiga alat ini – reaksi profil,,,,, WhydidyourendenderDan UsetrackedEffect– Anda dapat mengoptimalkan kinerja komponen React. React Profiler membantu Anda mengukur kinerja rendering, WhyDidyourender menentukan pelepasan yang tidak perlu, dan useTrackedEffect Lacak perubahan status secara efektif. Mengintegrasikan alat -alat ini ke dalam alur kerja pengembangan Anda dapat secara signifikan meningkatkan kinerja dan efisiensi aplikasi reaksi Anda.