Mobiilirakenduse kasutamine peaks olema nauditav kogemus ilma masendavate viivitusteta. React Native'i arendajana on ülioluline, et optimeeriksite oma rakendusi, et need töötaksid hästi ja neid oleks lihtne kasutada. Rakenduse tippjõudlus nõuab õigete tööriistade ja teekide abil puhta ja tõhusa koodi kirjutamist.
Vaadake neid näpunäiteid ja tehnikaid oma React Native'i rakenduse toimivuse optimeerimiseks.
1. Vähendage tarbetuid uuesti renderdusi, kasutades useMemo Hooki
React Native renderdab komponendid virtuaalse DOM-i (VDOM) tehnoloogia abil. VDOM jälgib kõiki rakenduse komponendi muudatusi ja renderdab kogu vaate hierarhia uuesti, kui seda vajalikuks peab. See protsess on kallis, seega peaksite vältima komponendi oleku ja rekvisiitide tarbetuid värskendusi.
Teek React pakub kasutaMemot ja kasutage tagasihelistamist konksud selle probleemi lahendamiseks funktsionaalsetes komponentides. Selleks saate kasutada konksu useMemo
jäta meelde JavaScripti funktsiooni tulemuseks oleva väärtuse mida te ei soovi iga renderduse korral ümber arvutada.Siin on näide selle kohta, kuidas saate kasutada kasutaMemot konks:
importida { useMemo } alates'reageeri';funktsiooniMinu komponent({ andmed }) {
// Funktsioon computeExpensiveValue on kallis arvutus, mis
// ei pea iga renderduse korral ümber arvutama.
konst kallisValue = useMemo(() => computeExpensiveValue (andmed), [andmed]);
// Komponent saab kasutada meeldejäetud väärtust ilma uuesti arvutamata
// seda igal renderdusel.
tagasi{expensiveValue}</div>;
}
Mähkimine computeExpensiveValue funktsiooni sees kasutaMemot konks jätab funktsiooni tulemuse meelde. The kasutaMemot konks võib aktsepteerida ka teist argumenti sõltuvusena. See tähendab, et meeldejäetud funktsioon käivitab võimenduse ainult siis, kui see sõltuvus muutub.
kasutage tagasihelistamist on sarnane kasutaMemot, kuid see jätab väärtuse asemel meelde tagasihelistamise funktsiooni. See võib olla kasulik alamkomponentide tarbetute uuesti renderdamiste vältimiseks, mille käivitab rekvisiidina edasi antud tagasihelistamise funktsioon.
2. Tõhus olekuandmete töötlemine
Halb olekuhaldus võib põhjustada andmete vastuolusid, mis võivad põhjustada ootamatut käitumist, mida võib olla raske kindlaks teha ja parandada. Hea olekuhaldus hõlmab mittevajalike andmete olekusse salvestamise vältimist, mis võib rakendust aeglustada ja silumise raskendada. Oluline on tagada, et kogu salvestatud olek on komponendi renderdamiseks hädavajalik.
Teine viis oleku tõhusaks värskendamiseks on kasutada muutumatuse tehnikaid, nagu leviku operaator või Object.assign() meetod.
Näiteks:
importida Reageerige, { useState } alates'reageeri';funktsiooniMinu komponent() {
konst [state, setState] = useState({
arv: 0,
tekst: 'Tere'
});funktsioonikäepideKlõpsake() {
setState(prevState => {
tagasiObjekt.assign({}, prevState, { count: prevState.count + 1 });
});
}
tagasi (
Selles näites on käepideKlõpsake funktsioon kasutab setState konks oleku värskendamiseks. Siiski kasutab see olekuobjekti otsese muutmise asemel Object.assign() meetod uue objekti loomiseks, mis kopeerib eelmise oleku koos muudetud loendusomadustega. See lähenemisviis võimaldab Reacti virtuaalsel DOM-il komponendi uuesti renderdada, kui ta tuvastab, et olete olekut värskendanud.
Võite kasutada ka olekuhalduse teeki, nagu Redux ja sisseehitatud konteksti API selle tehnika rakendamiseks.
3. Rakendage tulemuslikkuse jälgimise süsteem
Mobiilirakenduste toimivuse jälgimise süsteemid (PMS) on tööriistad, mis võimaldavad teil mõõta ja analüüsida oma mobiilirakenduste toimivust. Need pakuvad selliseid funktsioone nagu reaalajas jälgimine, krahhi aruandlus, võrgu jälgimine, jõudlusmõõdikud ja kasutajaseansi kordus. Toimivuse jälgimise süsteemi kasutamine oma rakendusega React Native võimaldab teil tuvastada toimivuse kitsaskohad, et rakendust parandada ja skaleerida.
Siin on nimekiri mitmetest saadaolevatest PMC tööriistadest.
- React Native Debugger: eraldiseisev rakendus, mis võimaldab teil oma React Native'i rakenduse siluda ja olekut kontrollida. See sisaldab ka jõudlusmonitori, mis aitab teil jõudlusprobleeme tuvastada ja parandada.
- React Native Profiler: see sisseehitatud toimivuse jälgimise tööriist võimaldab teil jälgida oma rakenduse toimivust, mõõtes iga komponendi renderdamiseks kuluvat aega.
- Flipper: mobiilirakenduste arendusplatvorm koos jõudlusmonitoriga, mis aitab teil jõudlusprobleeme tuvastada ja parandada.
- Firebase'i toimivuse jälgimine: Firebase'i pakutav toimivuse jälgimise tööriist, mis võimaldab teil jälgida oma rakenduse toimivust erinevates seadmetes ja platvormidel.
4. Eemaldage Console.log avaldused
Kui lause console.log käivitub, saadab see JavaScripti mootorile sõnumi, et sõnum konsooli logiks. Seejärel kulub JS-mootoril sõnumi töötlemiseks ja kuvamiseks aega.
Liiga palju konsoolilauseid teie koodis aeglustab selle täitmist ja põhjustab jõudluse viivitusi. See võib olla eriti problemaatiline, kui teie rakendus töötab piiratud ressurssidega seadmes, näiteks madala kvaliteediga mobiilseadmes.
5. Ehitage tõhus navigeerimissüsteem
Hea navigeerimissüsteem parandab teie rakenduse React Native üldist struktuuri, muutes funktsioonide hooldamise, värskendamise ja olekuandmete tõhusa edastamise lihtsamaks. Lisaks muudab see teie rakenduses mitme kuvari vahel vahetamise palju lihtsamaks, parandades kasutajakogemust.
Peaksite arvestama selliste teguritega nagu õige navigeerimismuster (vahekaardipõhine, virnapõhine, sahtlipõhine jne), et see sobiks teie rakendusega. Võtke arvesse oma rakenduses oodatavate ekraanikuvade arvu ja seda, kuidas edastate olekuandmeid nende vahel.
Vahemällu salvestamine on kasulik meetod usaldusväärse navigatsioonisüsteemi arendamiseks. Vahemällu salvestamine võimaldab salvestada ekraani või komponendi oleku, kui kasutaja sellelt lahkub, ja taastada selle naastes. See aitab minimeerida laaditavate andmete hulka ja uuesti renderdamise kordade arvu.
React Native'il on navigeerimiseks saadaval mitu teeki, näiteks React Navigation ja React Native Navigation. Saate neid kasutada mõne levinud navigeerimismustri rakendamiseks oma rakenduses.
6. Vähendage rakenduse suurust koodi jagamise ja laisa laadimisega
Rakenduse suurus on optimeeritud jõudluse jaoks oluline, kuna see võib mõjutada kasutuskogemuse aspekte, nagu esialgne laadimisaeg, mälukasutus ja salvestusruum.
Koodi jagamine ja laisk laadimine on tehnikad, mis võivad teie React Native'i rakenduse suurust vähendada ja jõudlust parandada.
Koodi tükeldamine on protsess, mille käigus jagatakse suur JavaScripti koodibaasi väiksemateks, paremini hallatavateks "kimpudeks". See võib oluliselt vähendada rakenduse esialgset laadimisaega.
Laisk laadimine on tehnika, mis võimaldab laadida komponente siis, kui kasutaja nende juurde navigeerib, mitte käivitamisel. See võib aidata vähendada teie rakenduse kasutatava mälumahtu ja parandada üldist jõudlust.
Miks on jõudluse optimeerimine oluline?
Toimivuse optimeerimine on iga mobiilirakenduse edu jaoks ülioluline. Aeglane rakendus võib põhjustada kehva kasutuskogemuse ja lõppkokkuvõttes kaasa tuua vähese seotuse ja säilitamise.
Need nipid on vaid mõned viisid, mida saate kasutada, et tagada oma rakenduse kasutajaskonnale nauditav kogemus.
