Mobiilisovelluksen käytön pitäisi olla nautinnollinen kokemus ilman turhauttavia viiveitä. React Native -kehittäjänä on erittäin tärkeää, että optimoit sovelluksesi, jotta ne toimivat hyvin ja ovat helppokäyttöisiä. Sovelluksen huippusuorituskyky edellyttää puhtaan ja tehokkaan koodin kirjoittamista oikeilla työkaluilla ja kirjastoilla.
Katso nämä vinkit ja tekniikat optimoidaksesi React Native -sovelluksesi suorituskyvyn.
1. Vähennä tarpeettomia uudelleenrenderöityjä useMemo Hookin avulla
React Native renderöi komponentteja käyttämällä Virtual DOM (VDOM) -tekniikkaa. VDOM pitää kirjaa kaikista sovelluskomponenttiin tehdyistä muutoksista ja hahmontaa koko näkymähierarkian uudelleen, kun se katsoo sen tarpeelliseksi. Tämä prosessi on kallis, joten sinun tulee välttää tarpeettomia päivityksiä komponentin tilaan ja ominaisuuksiin.
React-kirjasto tarjoaa
käytäMemoa ja käytä takaisinsoittoa koukut tämän ongelman ratkaisemiseksi toiminnallisissa komponenteissa. Voit käyttää useMemo-koukkua muistaa JavaScript-funktion tuloksena olevan arvon jota et halua laskea uudelleen jokaisella renderöinnillä.Tässä on esimerkki siitä, kuinka voit käyttää käytäMemoa koukku:
tuonti { käytäMemoa } alkaen'reagoi';toimintoMyComponent({ data }) {
// computeExpensiveValue-funktio on kallis laskenta, joka
// ei tarvitse laskea uudelleen jokaisella renderöinnillä.
konst kallisarvo = useMemo(() => computeExpensiveValue (data), [data]);
// Komponentti voi käyttää muistiin tallennettua arvoa ilman uudelleenlaskentaa
// se jokaisessa renderöinnissä.
palata{expensiveValue}</div>;
}
Kääriminen computeExpensiveValue toiminto sisällä käytäMemoa hook tallentaa muistiin toiminnon tuloksen. The käytäMemoa koukku voi hyväksyä toisen argumentin riippuvuutena. Tämä tarkoittaa, että muistiin tallennettu toiminto suorittaa vahvistuksen vain, kun tämä riippuvuus muuttuu.
käytä takaisinsoittoa on samanlainen kuin käytäMemoa, mutta se tallentaa muistiin takaisinsoittotoiminnon arvon sijaan. Tämä voi olla hyödyllistä estämään alikomponenttien tarpeettomia uudelleenhahmonnuksia, jotka laukaisee soittopyyntö, joka välitetään esille.
2. Tehokas tilatietojen käsittely
Huono tilanhallinta voi johtaa tietojen epäjohdonmukaisuuksiin, mikä johtaa odottamattomaan toimintaan, jota voi olla vaikea jäljittää ja korjata. Hyvä tilanhallinta edellyttää tarpeettomien tietojen tallentamista tilaan, mikä voi hidastaa sovellusta ja vaikeuttaa virheenkorjausta. On tärkeää varmistaa, että kaikki tallennetut tilat ovat ehdottoman välttämättömiä komponentin hahmontamiseksi.
Toinen tapa päivittää tilaa tehokkaasti on käyttää muuttumattomuustekniikoita, kuten leviämisoperaattoria tai Object.assign() menetelmä.
Esimerkiksi:
tuonti Reagoi, { useState } alkaen'reagoi';toimintoMyComponent() {
konst [tila, setState] = useState({
Kreivi: 0,
teksti: 'Hei'
});toimintokahvaNapsauta() {
setState(prevState => {
palataEsine.assign({}, prevState, { count: prevState.count + 1 });
});
}
palata (
Tässä esimerkissä kahvaNapsauta toiminto käyttää setState koukku tilan päivittämiseen. Silti tilaobjektin suoran muokkaamisen sijaan se käyttää Object.assign() menetelmää luodaksesi uuden objektin, joka kopioi edellisen tilan count-ominaisuutta muokattuna. Tämän lähestymistavan avulla Reactin virtuaalinen DOM voi hahmontaa komponentin uudelleen, kun se tunnistaa, että olet päivittänyt tilan.
Voit myös käyttää tilanhallintakirjastoa, kuten Redux ja sisäänrakennettu konteksti-API toteuttaa tämä tekniikka.
3. Ota käyttöön suorituskyvyn seurantajärjestelmä
Mobiilisovellusten suorituskyvyn seurantajärjestelmät (PMS) ovat työkaluja, joiden avulla voit mitata ja analysoida mobiilisovellustesi suorituskykyä. Ne tarjoavat ominaisuuksia, kuten reaaliaikaisen valvonnan, kaatumisraportoinnin, verkon valvonnan, suorituskykymittarit ja käyttäjäistunnon toiston. Suorituskyvyn seurantajärjestelmän käyttäminen React Native -sovelluksen kanssa antaa sinun tunnistaa suorituskyvyn pullonkauloja sovelluksesi korjaamiseksi ja skaalaamiseksi.
Tässä on luettelo useista saatavilla olevista PMC-työkaluista.
- React Native Debugger: Itsenäinen sovellus, jonka avulla voit korjata React Native -sovelluksesi tilan ja tarkistaa sen tilan. Se sisältää myös suorituskykymonitorin, jonka avulla voit tunnistaa ja korjata suorituskykyongelmia.
- React Native Profiler: Tämän sisäänrakennetun suorituskyvyn seurantatyökalun avulla voit seurata sovelluksesi suorituskykyä mittaamalla kunkin komponentin hahmontamiseen kuluvaa aikaa.
- Flipper: Mobiilisovellusten kehitysalusta, jossa on suorituskykymonitori, jonka avulla voit tunnistaa ja korjata suorituskykyongelmia.
- Firebase Performance Monitoring: Firebasen tarjoama suorituskyvyn seurantatyökalu, jonka avulla voit seurata sovelluksesi suorituskykyä eri laitteilla ja alustoilla.
4. Poista Console.log-lausunnot
Kun console.log-käsky suoritetaan, se lähettää viestin JavaScript-moottorille, joka kirjaa viestin konsoliin. JS-moottorilta kuluu sitten aikaa käsitelläkseen ja näyttääkseen viestin.
Liian monta konsolilauseketta koodissasi hidastaa sen suorittamista ja aiheuttaa suoritusviiveitä. Tämä voi olla erityisen ongelmallista, kun sovelluksesi toimii laitteessa, jonka resurssit ovat rajalliset, kuten halvemmassa mobiililaitteessa.
5. Rakenna tehokas navigointijärjestelmä
Hyvä navigointijärjestelmä parantaa React Native -sovelluksesi yleistä rakennetta, mikä helpottaa ominaisuuksien ylläpitoa, päivittämistä ja tilatietojen välittämistä tehokkaasti. Lisäksi se helpottaa huomattavasti useiden näyttöjen välillä vaihtamista sovelluksessasi ja parantaa käyttökokemusta.
Sinun tulee harkita sellaisia tekijöitä, kuten oikea navigointimalli (välilehtipohjainen, pinopohjainen, vetolaatikkopohjainen jne.) sovelluksellesi sopivaksi. Ota huomioon, kuinka monta näyttöä odotat sovelluksessasi ja kuinka välität tilatietoja niiden välillä.
Välimuisti on hyödyllinen menetelmä luotettavan navigointijärjestelmän kehittämiseen. Välimuistin avulla voit tallentaa näytön tai komponentin tilan, kun käyttäjä poistuu siitä, ja palauttaa sen, kun he palaavat. Tämä auttaa minimoimaan ladattavan tiedon määrän ja uudelleenrenderöinnin määrän.
React Nativessa on useita navigointikirjastoja, kuten React Navigation ja React Native Navigation. Niiden avulla voit ottaa käyttöön joitain näistä yleisistä navigointimalleista sovelluksessasi.
6. Pienennä sovelluksen kokoa koodinjaolla ja laiskalla latauksella
Sovelluksen koko on tärkeä suorituskyvyn optimoinnin kannalta, koska se voi vaikuttaa käyttökokemukseen, kuten alkulatausaikaan, muistin käyttöön ja tallennustilaan.
Koodin jakaminen ja laiska lataus ovat tekniikoita, jotka voivat pienentää React Native -sovelluksesi kokoa ja parantaa suorituskykyä.
Koodin jakaminen on prosessi, jossa suuri JavaScript-koodikanta hajotetaan pienempiin, paremmin hallittaviin "nippuihin". Tämä voi lyhentää merkittävästi sovelluksen alkulatausaikaa.
Laiska lataus on tekniikka, jonka avulla voit ladata komponentteja käyttäjän navigoiessa niihin eikä käynnistyksen yhteydessä. Tämä voi auttaa vähentämään sovelluksesi käyttämän muistin määrää ja parantamaan yleistä suorituskykyä.
Miksi suorituskyvyn optimointi on tärkeää?
Suorituskyvyn optimointi on ratkaisevan tärkeää minkä tahansa mobiilisovelluksen menestykselle. Hidas sovellus voi johtaa huonoon käyttökokemukseen ja lopulta heikentää sitoutumista ja pysyvyyttä.
Nämä temput ovat vain muutamia tapoja, joita voit hyödyntää varmistaaksesi miellyttävän kokemuksen sovelluksesi käyttäjäkunnalle.