Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Programėlės mobiliesiems naudojimas turėtų būti maloni patirtis, be varginančių vėlavimų. Kadangi esate „React Native“ kūrėjas, labai svarbu optimizuoti savo programas, kad jos gerai veiktų ir jas būtų lengva naudoti. Kad programos būtų našesnės, turite parašyti švarų ir efektyvų kodą naudodami tinkamus įrankius ir bibliotekas.

Peržiūrėkite šiuos patarimus ir metodus, kad optimizuotumėte „React Native“ programos našumą.

1. Sumažinkite nereikalingų pakartotinių atvaizdų skaičių naudodami „useMemo Hook“.

„React Native“ pateikia komponentus naudodama virtualią DOM (VDOM) technologiją. VDOM seka visus programos komponento pakeitimus ir, kai mano, kad tai būtina, iš naujo pateikia visą rodinio hierarchiją. Šis procesas yra brangus, todėl turėtumėte vengti nereikalingų komponento būsenos ir rekvizitų atnaujinimų.

„React“ biblioteka suteikia naudotiMemo

instagram viewer
ir naudokite atgalinį skambutį kabliukai šiai funkcinių komponentų problemai išspręsti. Galite naudoti „useMemo“ kabliuką įsiminti gautą JavaScript funkcijos reikšmę kad nenorite perskaičiuoti kiekvieno pateikimo metu.

Štai pavyzdys, kaip galite naudoti naudotiMemo kabliukas:

importuoti { useMemo } iš'reaguoti';
funkcijaMano komponentas({ duomenys }) {
// Funkcija computeExpensiveValue yra brangus skaičiavimas, kuris
// nereikia iš naujo skaičiuoti kiekvieną kartą pateikiant.
konst brangiValue = useMemo(() => computeExpensiveValue (duomenys), [duomenys]);
// Komponentas gali naudoti atmintyje įrašytą reikšmę neskaičiuodamas iš naujo 
// tai kiekviename vaizde.
grąžinti
{expensiveValue}</div>;
}

Apvyniojimas computeExpensiveValue funkcija viduje naudotiMemo kabliukas įsimena funkcijos rezultatą. The naudotiMemo kabliukas gali priimti antrą argumentą kaip priklausomybę. Tai reiškia, kad atmintyje įrašyta funkcija veiks tik pasikeitus šiai priklausomybei.

naudokite atgalinį skambutį yra panašus į naudotiMemo, tačiau ji įsimena atgalinio skambinimo funkciją, o ne reikšmę. Tai gali būti naudinga siekiant išvengti nereikalingo antrinių komponentų pakartotinio atvaizdavimo, kurį suaktyvina atgalinio skambinimo funkcija, perduodama kaip rekvizitas.

2. Efektyvus valstybės duomenų tvarkymas

Prastas būsenos valdymas gali sukelti duomenų neatitikimų, o tai gali sukelti netikėtą elgesį, kurį gali būti sunku atsekti ir ištaisyti. Geras būsenos valdymas apima nereikalingų duomenų saugojimą būsenoje, nes tai gali sulėtinti programą ir apsunkinti derinimą. Svarbu užtikrinti, kad visos jūsų saugomos būsenos būtų absoliučiai būtinos komponentui pateikti.

Kitas būdas efektyviai atnaujinti būseną yra naudoti nekintamumo metodus, pvz., sklaidos operatorių arba Object.assign() metodas.

Pavyzdžiui:

importuoti Reaguoti, { useState } iš'reaguoti';
funkcijaMano komponentas() {
konst [state, setState] = useState({
 skaičiuoti: 0,
 tekstas: 'Sveiki'
 });


funkcijarankenaSpustelėkite() {
 setState(prevState => {
grąžintiObjektas.assign({}, prevState, { count: prevState.count + 1 });
 });
 }
grąžinti (

Šiame pavyzdyje rankenaSpustelėkite funkcija naudoja setState kabliukas atnaujinti būseną. Vis dėlto, užuot tiesiogiai modifikavęs būsenos objektą, jis naudoja Object.assign() metodas sukurti naują objektą, kuris nukopijuoja ankstesnę būseną su pakeista skaičiavimo ypatybe. Šis metodas leidžia „React“ virtualiam DOM iš naujo pateikti komponentą, kai atpažįsta, kad atnaujinote būseną.

Taip pat galite naudoti valstybės valdymo biblioteką, pvz., Redux ir integruotą konteksto API įgyvendinti šią techniką.

3. Įdiekite našumo stebėjimo sistemą

Programėlių mobiliesiems našumo stebėjimo sistemos (PMS) – tai įrankiai, leidžiantys matuoti ir analizuoti programų mobiliesiems našumą. Jie teikia tokias funkcijas kaip stebėjimas realiuoju laiku, gedimų ataskaitų teikimas, tinklo stebėjimas, našumo metrika ir vartotojo seanso atkūrimas. Naudodami našumo stebėjimo sistemą su programa „React Native“, galėsite nustatyti našumo kliūtis, kad ištaisytumėte ir padidintumėte savo programą.

Čia yra kelių galimų PMC įrankių sąrašas.

  • „React Native Debugger“: atskira programa, leidžianti derinti ir patikrinti „React Native“ programos būseną. Jame taip pat yra našumo monitorius, padedantis nustatyti ir išspręsti našumo problemas.
  • React Native Profiler: šis integruotas našumo stebėjimo įrankis leidžia stebėti programos našumą matuojant laiką, kurio reikia kiekvienam komponentui pateikti.
  • „Flipper“: programų mobiliesiems kūrimo platforma su našumo monitoriumi, kuris gali padėti nustatyti ir išspręsti našumo problemas.
  • „Firebase“ našumo stebėjimas: „Firebase“ teikiamas našumo stebėjimo įrankis, leidžiantis stebėti programos našumą skirtinguose įrenginiuose ir platformose.

4. Pašalinkite Console.log pareiškimus

Kai vykdomas console.log sakinys, jis siunčia pranešimą „JavaScript“ varikliui, kad jis užregistruotų pranešimą konsolėje. Tada JS varikliui reikia laiko apdoroti ir parodyti pranešimą.

Per daug konsolės teiginių jūsų kode sulėtins jo vykdymą ir sukels našumo delsą. Tai gali būti ypač problematiška, kai programa veikia įrenginyje su ribotais ištekliais, pvz., žemos klasės mobiliajame įrenginyje.

5. Sukurkite efektyvią navigacijos sistemą

Gera navigacijos sistema pagerins bendrą „React Native“ programos struktūrą, todėl bus lengviau prižiūrėti, atnaujinti funkcijas ir efektyviai perduoti būsenos duomenis. Be to, tai žymiai palengvina kelių ekranų perjungimą programoje ir pagerina vartotojo patirtį.

Turėtumėte atsižvelgti į tokius veiksnius, kaip tinkamas naršymo šablonas (skirtukais, rietuvėmis, stalčių pagrindu ir kt.), kad tiktų jūsų programai. Atsižvelkite į tai, kiek ekranų tikitės programoje ir į tai, kaip perduosite būsenos duomenis tarp jų.

Talpyklos kaupimas yra naudingas būdas sukurti patikimą navigacijos sistemą. Talpykloje galite išsaugoti ekrano arba komponento būseną, kai vartotojas iš jo išeina, ir atkurti, kai jie grįžta. Tai padeda sumažinti duomenų, kuriuos reikia įkelti, kiekį ir pakartotinio pateikimo skaičių.

„React Native“ turi keletą bibliotekų, kurias galima naršyti, pvz., „React Navigation“ ir „React Native Navigation“. Galite juos naudoti norėdami įdiegti kai kuriuos iš šių bendrų naršymo šablonų savo programoje.

6. Sumažinkite programos dydį naudodami kodo padalijimą ir tingų įkėlimą

Programos dydis yra svarbus siekiant optimizuoti našumą, nes jis gali turėti įtakos naudotojo patirties aspektams, pvz., pradiniam įkėlimo laikui, atminties naudojimui ir saugyklos vietai.

Kodo padalijimas ir tingus įkėlimas yra būdai, kurie gali sumažinti „React Native“ programos dydį ir pagerinti našumą.

Kodo padalijimas yra didelės „JavaScript“ kodo bazės suskaidymas į mažesnius, lengviau valdomus „ryšulius“. Tai gali žymiai sutrumpinti pradinį programos įkėlimo laiką.

Tingus įkėlimas yra metodas, leidžiantis įkelti komponentus vartotojui naršant prie jų, o ne paleidžiant. Tai gali padėti sumažinti programos naudojamos atminties kiekį ir pagerinti bendrą našumą.

Kodėl našumo optimizavimas yra svarbus

Našumo optimizavimas yra labai svarbus bet kurios mobiliosios programos sėkmei. Lėta programa gali lemti prastą vartotojo patirtį ir galiausiai sumažinti įsitraukimą bei išlaikymą.

Šios gudrybės yra tik keli būdai, kuriuos galite panaudoti, kad užtikrintumėte malonią programos naudotojų patirtį.