React Native Academy · Oppitunti

Profilointi Flipperillä ja React DevToolsilla

Oppitunti 1/413 vaihetta

Profilointi Flipperillä ja React DevToolsilla on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Miksi suorituskyvyn profilointi on tärkeää

React Native -sovelluksissa voi esiintyä pudonneita ruutuja, hidasta luetteloiden vieritystä, pitkiä käynnistysaikoja ja liiallista muistinkäyttöä — kaikki nämä turhauttavat käyttäjiä. Ennen optimointia on mitattava, jotta ymmärrät, missä pullonkaula todella on, sen sijaan että arvaisit ja tekisit oletuksiin perustuvia muutoksia.

React Nativen kaksi tärkeintä profilointityökalua ovat Flipper (natiivin tason virheenkorjausalusta) ja React DevTools (joka sisältää komponenttiprofilerin). Yhdessä käytettyinä ne tarjoavat näkyvyyden sekä JS-säikeen suorituskykyyn että komponenttien renderöintipuuhun.

Flipperin määrittäminen

Flipper on Metan työpöytäsovellus, joka muodostaa USB:n tai verkon kautta yhteyden käynnissä oleviin React Native -sovelluksiin ja näyttää reaaliaikaisia virheenkorjaustietoja. Lataa se osoitteesta fbflipper.com ja asenna kehityskoneellesi.

Flipper toimii sellaisenaan React Native CLI -projekteissa fyysisillä laitteilla ja simulaattoreissa. Expo-sovelluksissa on käytettävä kehitysversiota (ei Expo Goa). Kun yhteys on muodostettu, Flipperin sivupalkissa näkyvät saatavilla olevat laajennukset, kuten React DevTools, Network Inspector, Hermes Debugger ja Layout Inspector.

React DevTools -laajennus

Flipperin React DevTools -laajennuksella voit tarkastella komponenttipuuta reaaliajassa. Voit valita minkä tahansa komponentin ja nähdä oikeassa paneelissa sen nykyiset propsit, tilan ja hookien arvot. Tämä on erittäin hyödyllistä, kun selvitetään, miksi komponentti renderöityy odottamattomilla arvoilla.

Voit käyttää myös erillistä react-devtools-pakettia: asenna se globaalisti komennolla npm install -g react-devtools, suorita sitten react-devtools ja avaa kehittäjävalikko ravistamalla laitetta yhteyden muodostamista varten.

# 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: renderöintien tallentaminen

React DevToolsin Profiler-välilehti tallentaa, mitkä komponentit renderöityivät ja kuinka kauan kukin renderöinti kesti. Napsauta Record, käytä sovellusta (vieritä luetteloa, kirjoita kenttään tai napauta painiketta) ja napsauta sitten Stop. Liekityskaavio näyttää jokaisen renderöinnin värikoodattuna keltaisesta (hidas) siniseen (nopea).

Liekityskaavion jokainen palkki edustaa komponentin uudelleenrenderöintiä. Korkeammat palkit tarkoittavat, että renderöintiin kului enemmän aikaa. Kun napsautat palkkia, näet renderöinnin keston millisekunteina sekä sen, mitkä propsit tai hookit muuttuivat ja käynnistivät uudelleenrenderöinnin.

Tarpeettomien uudelleenrenderöintien tunnistaminen

Yleinen suorituskykyongelma ovat komponentit, jotka renderöityvät uudelleen, vaikka niiden propsit tai tila eivät ole tosiasiassa muuttuneet. Etsi React Profilerissa komponentteja, jotka näkyvät jokaisessa liekityskaavion ruudussa silloinkin, kun käyttäjä ei ole vuorovaikutuksessa niiden kanssa — nämä komponentit ovat hyviä memoizoinnin kohteita.

Voit ottaa React DevToolsissa käyttöön myös Highlight updates -asetuksen. Aina kun komponentti renderöityy uudelleen, sen ympärillä näkyy näytössä värillinen reunus. Vihreä tarkoittaa nopeaa renderöintiä ja keltainen hidasta. Jos koko näyttö välähtää yhden painikkeen painalluksen yhteydessä, kyseessä on merkki liiallisista uudelleenrenderöinneistä.

Layout Inspector ja Network-välilehti

Flipperin Layout Inspector näyttää natiivin näkymähierarkian samalla tavoin kuin iOS:n View Debugger tai Androidin Layout Inspector. Voit napauttaa tarkastimessa mitä tahansa elementtiä korostaaksesi sen laitteessa ja tarkastellaksesi sen natiivin tason asetteluominaisuuksia.

Network Inspector näyttää kaikki sovelluksen tekemät HTTP-pyynnöt, mukaan lukien otsakkeet, rungon ja vastauksen. Tämä auttaa havaitsemaan tarpeettomat API-kutsut, odottamattoman hitaat päätepisteet tai väärin määritetyt välimuistiotsakkeet, joiden vuoksi tietoja haetaan uudelleen tarpeettomasti.

Hermes ja JS-säikeen suorituskyky

React Native käyttää mobiililaitteille optimoitua Hermes-JavaScript-moottoria oletusmoottorina React Native -versiosta 0.70 lähtien. Hermes esikääntää JavaScriptin tavukoodiksi koontivaiheessa, mikä lyhentää käynnistysaikaa huomattavasti. Flipperin Hermes Debugger -työkalulla voit profiloida suorittimen käyttöä ja tarkastella muistivarauksia JS-keossa.

Profiloi JS-säikeen suorituskykyä käyttämällä Hermes Debuggerin Timeline-välilehteä. Tallenna istunto ja etsi sitten pitkiä JavaScript-tehtäviä, jotka estävät käyttöliittymäsäiettä. Yli 16 ms kestävät tehtävät aiheuttavat pudonneita ruutuja (alle 60 FPS:n nopeudella).

FPS:n mittaaminen Performance Monitorilla

React Nativen sisäänrakennettu Performance Monitor (jonka voi avata kehittäjävalikosta) näyttää ruutujen määrän sekunnissa reaaliajassa. Näytössä on kaksi FPS-laskuria: JS FPS (kuinka nopeasti JavaScript suoritetaan) ja UI FPS (kuinka nopeasti ruudut renderöidään natiivisti).

Tavoitteena on 60 FPS molemmille. Jos JS FPS laskee mutta UI FPS pysyy korkeana, pullonkaula on JavaScript-logiikassa. Jos UI FPS laskee JS FPS:n pysyessä korkeana, pullonkaula on natiivin tason renderöinnissä — usein syynä ovat liian monet View-komponentit tai monimutkaiset varjot.

console.time-komennon käyttäminen mikrovertailuihin

Käytä tiettyjen toimintojen nopeaan mittaamiseen — esimerkiksi API-vastauksen käsittelyyn tai suuren taulukon suodattamiseen kuluvan ajan mittaamiseen — komentoja console.time ja console.timeEnd. Ne ovat käytettävissä Hermesissä ja toimivat Metro-/Flipper-konsolissa.

Tämä auttaa tunnistamaan raskaat tietomuunnokset, jotka voitaisiin siirtää pois JS-säikeestä, memoisoida tai yksinkertaistaa ennen luettelon renderöintiä.

// 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'

Miksi mittaat ennen optimointia

Yleinen virhe on käyttää memoizointia (React.memo, useCallback, useMemo) kaikkialla varmuuden vuoksi. Tämä itse asiassa lisää kustannuksia — memoizointi suorittaa vertailufunktioita jokaisen renderöinnin yhteydessä, ja yksinkertaisissa komponenteissa vertailu voi maksaa enemmän kuin pelkkä uudelleenrenderöinti.

Sääntö on seuraava: profiloi ensin ja optimoi sitten kohdista, joissa profiloija näyttää todellisen pullonkaulan. React Profilerin Why did this render? -paneeli kertoo kunkin komponentin kohdalla täsmälleen, mitkä propsit tai hookit muuttuivat, joten tiedät tarkasti, mitä kannattaa memoisoida.

Suorituskyvyn seuranta tuotannossa

Flipperillä tehtävä kehityksen aikainen profilointi näyttää suorituskyvyn vain omalla koneellasi. Tuotantoa koskevia tietoja saat integroimalla suorituskyvyn seurantatyökalun, kuten Firebase Performance Monitoringin tai Sentry Performancen. Ne keräävät todellisten käyttäjien mittareita, kuten sovelluksen käynnistysajan, näkymän renderöinnin keston ja HTTP-pyyntöjen viiveen.

Instrumentoi tiettyjä työnkulkuja käyttämällä Firebasen Performancen funktiota perf().startTrace('my-operation') ja tarkastele ajoitustietoja Firebase Consolessa maan, laitteen ja sovellusversion mukaan eriteltyinä.

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
  }
}

Pikakertaus

Testaa, miten hyvin ymmärrät tämän oppitunnin React Native Mobile Development -käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte: kuinka Flipperillä ja React DevTools Profilerilla tallennetaan komponenttien renderöinnit, kuinka tarpeettomat uudelleenrenderöinnit tunnistetaan Highlight Updates -peittokuvan avulla ja miksi mittaukset kannattaa aina tehdä profilointityökaluilla ennen optimointien käyttöönottoa. Seuraavaksi käytämme memoizointitekniikoita React.memolla, useCallbackilla ja useMemolla löytääksemme havaitsemamme pullonkaulat.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Profilointi Flipperillä ja React DevToolsilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Profilointi Flipperillä ja React DevToolsilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Profilointi Flipperillä ja React DevToolsilla”?

Yhdistäkää Flipper käynnissä olevaan sovellukseen, tarkastelkaa komponenttipuuta React DevTools -pluginilla, tallentakaa renderöinnin jäljitys ja tunnistakaa tarpeettomasti uudelleenrenderöityvät kom… Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Profilointi Flipperillä ja React DevToolsilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Profilointi Flipperillä ja React DevToolsilla
Muistiointi: React.memo, useCallback ja useMemo
FlatListin suorituskyvyn optimointi
Pakettikoko ja laiska lataus

← Takaisin: React Native Academy