Profilering med Flipper og React DevTools
Forbind Flipper til en kørende app, brug React DevTools-plugin'et til at inspicere komponenttræet, optag et renderingsspor, og identificér hvilke komponenter der gengives unødvendigt igen.
Profilering med Flipper og React DevTools er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvorfor profilering af ydeevne er vigtig
React Native-apps kan have tabte billeder, langsom rulning i lister, lang opstartstid og et for højt hukommelsesforbrug — alt sammen noget, der frustrerer brugerne. Før du optimerer, skal du måle for at forstå, hvor flaskehalsen faktisk er, i stedet for at gætte og lave ændringer baseret på antagelser.
De to primære profileringsværktøjer til React Native er Flipper (en platform til fejlfinding af native apps) og React DevTools (som indeholder en komponentprofiler). Sammen giver de dig indsigt i både ydeevnen for JS-tråden og komponenternes gengivelsestræ.
Konfiguration af Flipper
Flipper er en desktopapplikation fra Meta, der opretter forbindelse til kørende React Native-apps via USB eller et netværk og viser fejlfindingsdata i realtid. Hent den fra fbflipper.com, og installér den på din udviklingsmaskine.
Flipper fungerer direkte med React Native CLI-projekter på fysiske enheder og simulatorer. Til Expo-apps skal du bruge et udviklingsbuild (ikke Expo Go). Når forbindelsen er oprettet, viser Flippers sidepanel tilgængelige plugins, herunder React DevTools, Network Inspector, Hermes Debugger og Layout Inspector.
Pluginet React DevTools
Pluginet React DevTools i Flipper giver dig mulighed for at inspicere komponenttræet i realtid. Du kan vælge en hvilken som helst komponent for at se dens aktuelle props, tilstand og hook-værdier i panelet til højre. Det er uvurderligt, når du skal fejlfinde, hvorfor en komponent gengives med uventede værdier.
Du kan også bruge den selvstændige pakke react-devtools: installér den globalt med npm install -g react-devtools, kør derefter react-devtools, og ryst din enhed for at åbne udviklermenuen og oprette forbindelse.
# 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 menuReact Profiler: Optagelse af gengivelser
I React DevTools registrerer fanen Profiler, hvilke komponenter der blev gengivet, og hvor lang tid hver gengivelse tog. Klik på Optag, interagér med appen (rul i en liste, skriv i et felt, tryk på en knap), og klik derefter på Stop. Flammgrafen viser hver gengivelse med farver fra gul (langsom) til blå (hurtig).
Hver bjælke i flammgrafen repræsenterer en ny gengivelse af en komponent. Højere bjælker angiver, at der blev brugt mere tid på gengivelsen. Når du klikker på en bjælke, vises gengivelsens varighed i millisekunder samt hvilke props eller hooks der blev ændret og udløste den nye gengivelse.
Identifikation af unødvendige nye gengivelser
Et almindeligt ydelsesproblem er komponenter, der gengives igen, selv om deres props eller tilstand faktisk ikke er ændret. Se i React Profiler efter komponenter, der vises i hvert frame i flammgrafen, selv når brugeren ikke interagerer med dem — de er kandidater til memoization.
Du kan også aktivere indstillingen Fremhæv opdateringer i React DevTools. Hver gang en komponent gengives igen, blinker den med en farvet kant på skærmen. Grøn betyder en hurtig gengivelse, gul betyder langsom. Hvis hele skærmen blinker ved ét tryk på en knap, er det et tegn på for mange nye gengivelser.
Layoutinspektøren og netværksfanen
Flippers Layout Inspector viser hierarkiet af native visninger, på samme måde som iOS View Debugger eller Android Layout Inspector. Du kan trykke på et element i inspektøren for at fremhæve det på enheden og inspicere dets native layoutegenskaber.
Network Inspector viser alle HTTP-anmodninger, som appen foretager, herunder headere, brødtekst og svar. Det er nyttigt til at finde overflødige API-kald, uventet langsomme endepunkter eller forkert konfigurerede cacheheadere, der får data til at blive hentet igen unødvendigt.
Hermes og JS-trådens ydeevne
React Native bruger Hermes, en JavaScript-motor optimeret til mobilenheder, som standardmotor siden React Native 0.70. Hermes forkompilerer JavaScript til bytekode på byggetidspunktet, hvilket reducerer opstartstiden markant. Flippers Hermes Debugger giver dig mulighed for at profilere CPU-forbrug og inspicere hukommelsesallokeringer i JS-heapen.
Hvis du vil profilere JS-trådens ydeevne, skal du bruge fanen Tidslinje i Hermes Debugger. Optag en session, og se derefter efter lange JavaScript-opgaver, der blokerer UI-tråden. Opgaver på over 16 ms medfører tabte billeder (under 60 fps).
Måling af FPS med Performance Monitor
React Natives indbyggede Performance Monitor (tilgængelig fra udviklermenuen) viser billeder pr. sekund i realtid. Der vises to FPS-tællere: JS FPS (hvor hurtigt JavaScript udføres) og UI FPS (hvor hurtigt billeder gengives native).
Målet er 60 FPS for begge. Hvis JS FPS falder, mens UI FPS forbliver høj, ligger flaskehalsen i JavaScript-logikken. Hvis UI FPS falder, mens JS FPS er høj, ligger flaskehalsen i det native gengivelseslag — ofte på grund af for mange Views eller komplekse skygger.
Brug af console.time til mikromålinger
Til hurtige målinger af bestemte operationer — f.eks. hvor lang tid det tager at behandle et API-svar eller filtrere et stort array — skal du bruge console.time og console.timeEnd. De er tilgængelige i Hermes og fungerer i Metro-/Flipper-konsollen.
Det er nyttigt til at identificere krævende datatransformationer, som kan flyttes væk fra JS-tråden, memoiseres eller forenkles, før en liste gengives.
// 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'Hvorfor du måler, før du optimerer
En almindelig fejl er at anvende memoization (React.memo, useCallback, useMemo) overalt som en sikkerhedsforanstaltning. Det øger faktisk omkostningen — memoization kører sammenligningsfunktioner ved hver gengivelse, og for simple komponenter kan sammenligningen koste mere end blot at gengive igen.
Reglen er: profilér først, og optimér derefter dér, hvor profileren viser en reel flaskehals. React Profilers panel Hvorfor blev dette gengivet? fortæller dig præcis, hvilke props eller hooks der blev ændret for hver komponent, så du ved nøjagtigt, hvad der skal memoiseres.
Overvågning af ydeevne i produktion
Udviklingsprofilering med Flipper viser kun ydeevnen på din maskine. Hvis du vil have indsigt fra produktionen, skal du integrere et værktøj til overvågning af ydeevne som Firebase Performance Monitoring eller Sentry Performance. De indsamler målinger fra virkelige brugere, herunder appens opstartstid, varigheden af gengivelse af skærme og latenstiden for HTTP-anmodninger.
Brug perf().startTrace('my-operation') fra Firebase Performance til at instrumentere bestemte forløb og se tidsdata opdelt efter land, enhed og appversion i Firebase-konsollen.
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
}
}Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du: hvordan du bruger Flipper og React DevTools Profiler til at optage komponentgengivelser, hvordan du identificerer unødvendige gengivelser igen ved hjælp af overlejringen Highlight Updates, og hvorfor du altid bør måle med profileringsværktøjer, før du anvender optimeringer. Næste trin er at anvende teknikker til memoization med React.memo, useCallback og useMemo for at fjerne de flaskehalse, vi fandt.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Profilering med Flipper og React DevTools” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Profilering med Flipper og React DevTools”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Profilering med Flipper og React DevTools”?
Forbind Flipper til en kørende app, brug React DevTools-plugin'et til at inspicere komponenttræet, optag et renderingsspor, og identificér hvilke komponenter der gengives unødvendigt igen. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Profilering med Flipper og React DevTools”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Profilering med Flipper og React DevTools
- Memoization med React.memo, useCallback og useMemo
- Ydeevneoptimering af FlatList
- Bundtstørrelse og lazy loading