Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Používání mobilní aplikace by mělo být příjemným zážitkem bez frustrujících prodlev. Jako vývojář React Native je důležité, abyste své aplikace optimalizovali, aby dobře fungovaly a snadno se používaly. Špičkový výkon aplikace vyžaduje, abyste psali čistý a efektivní kód pomocí správných nástrojů a knihoven.

Podívejte se na tyto tipy a techniky k optimalizaci výkonu vaší aplikace React Native.

1. Omezte zbytečné překreslování pomocí useMemo Hook

React Native vykresluje komponenty pomocí technologie Virtual DOM (VDOM). VDOM sleduje všechny změny komponenty aplikace a znovu vykresluje celou hierarchii zobrazení, když to považuje za nutné. Tento proces je drahý, takže byste se měli vyhnout zbytečným aktualizacím stavu komponenty a rekvizit.

Knihovna React poskytuje použít Memo a použijte zpětné volání háčky k vyřešení tohoto problému ve funkčních součástech. Můžete použít háček useMemo

instagram viewer
zapamatovat si výslednou hodnotu funkce JavaScriptu že nechcete přepočítávat při každém renderu.

Zde je příklad toho, jak můžete použít použít Memo háček:

import { useMemo } z'reagovat';
funkceMyComponent({ data }) {
// Funkce computeExpensiveValue je drahý výpočet
// není nutné znovu počítat při každém renderu.
konst draháValue = useMemo(() => computeExpensiveValue (data), [data]);
// Komponenta může použít zapamatovanou hodnotu bez přepočítávání 
// to na každém renderu.
vrátit se
{expensiveValue}</div>;
}

Zabalení computeExpensiveValue funkce uvnitř použít Memo hook si zapamatuje výsledek funkce. The použít Memo hook může přijmout druhý argument jako závislost. To znamená, že funkce uložená v paměti se spustí pouze tehdy, když se tato závislost změní.

použijte zpětné volání je podobný použít Memo, ale místo hodnoty si zapamatuje funkci zpětného volání. To může být užitečné pro prevenci zbytečných překreslování podřízených komponent spouštěných funkcí zpětného volání předávanou jako rekvizita.

2. Efektivní zpracování stavových dat

Špatné řízení stavu může vést k nekonzistentnosti dat, což vede k neočekávanému chování, které může být obtížné vystopovat a opravit. Dobrá správa stavu zahrnuje vyvarování se ukládání zbytečných dat ve stavu, což může zpomalit aplikaci a ztížit ladění. Je důležité zajistit, aby všechny uložené stavy byly absolutně nezbytné pro vykreslení komponenty.

Dalším způsobem, jak efektivně aktualizovat stav, je použití technik neměnnosti, jako je operátor spread nebo the Object.assign() metoda.

Například:

import Reagovat, { useState } z'reagovat';
funkceMyComponent() {
konst [state, setState] = useState({
 počet: 0,
 text: 'Ahoj'
 });


funkcekliknout na kliku() {
 setState(prevState => {
vrátit seObjekt.assign({}, prevState, { count: prevState.count + 1 });
 });
 }
vrátit se (

V tomto příkladu je kliknout na kliku funkce používá setState háček pro aktualizaci stavu. Přesto místo přímé úpravy objektu stavu používá Object.assign() metoda k vytvoření nového objektu, který zkopíruje předchozí stav s upravenou vlastností count. Tento přístup umožňuje virtuálnímu DOM Reactu znovu vykreslit komponentu, když rozpozná, že jste aktualizovali stav.

Můžete také použít knihovnu správy stavu, jako je Redux a vestavěné kontextové API implementovat tuto techniku.

3. Implementujte systém sledování výkonu

Systémy monitorování výkonu mobilních aplikací (PMS) jsou nástroje, které vám umožňují měřit a analyzovat výkon vašich mobilních aplikací. Poskytují funkce, jako je monitorování v reálném čase, hlášení o selhání, monitorování sítě, metriky výkonu a přehrávání uživatelské relace. Použití systému monitorování výkonu s aplikací React Native vám umožní identifikovat úzká místa výkonu, abyste mohli opravit a škálovat vaši aplikaci.

Zde je seznam několika dostupných nástrojů PMC.

  • React Native Debugger: Samostatná aplikace, která vám umožní ladit a kontrolovat stav vaší aplikace React Native. Zahrnuje také monitor výkonu, který vám pomůže identifikovat a opravit problémy s výkonem.
  • React Native Profiler: Tento vestavěný nástroj pro sledování výkonu vám umožňuje sledovat výkon vaší aplikace měřením času potřebného k vykreslení jednotlivých komponent.
  • Flipper: Platforma pro vývoj mobilních aplikací s monitorem výkonu, který vám pomůže identifikovat a opravit problémy s výkonem.
  • Firebase Performance Monitoring: Nástroj pro sledování výkonu poskytovaný Firebase, který vám umožňuje sledovat výkon vaší aplikace na různých zařízeních a platformách.

4. Odebrat příkazy Console.log

Když se spustí příkaz console.log, odešle zprávu do modulu JavaScript, aby zprávu zaprotokoloval do konzoly. Zpracování a zobrazení zprávy pak trvá JS engine.

Příliš mnoho příkazů konzoly ve vašem kódu zpomalí jeho provádění a způsobí zpoždění výkonu. To může být obzvláště problematické, když vaše aplikace běží na zařízení s omezenými prostředky, jako je například mobilní zařízení nižší třídy.

5. Vybudujte účinný navigační systém

Dobrý navigační systém zlepší celkovou strukturu vaší aplikace React Native, usnadní údržbu, aktualizaci funkcí a efektivní předávání stavových dat. Navíc výrazně usnadňuje přepínání mezi více displeji ve vaší aplikaci a zlepšuje tak uživatelskou zkušenost.

Měli byste zvážit faktory, jako je správný navigační vzor (založený na kartách, na zásobníku, na šuplíku atd.), aby vyhovoval vaší aplikaci. Vezměte v úvahu počet obrazovek, které ve své aplikaci očekáváte, a způsob, jakým mezi nimi budete předávat stavová data.

Ukládání do mezipaměti je užitečná metoda pro vývoj spolehlivého navigačního systému. Ukládání do mezipaměti umožňuje uložit stav obrazovky nebo součásti, když ji uživatel opustí, a poté ji obnovit, když se vrátí. To pomáhá minimalizovat množství dat, která je třeba načíst, a počet opakování vykreslení.

React Native má k dispozici několik knihoven pro navigaci, jako je React Navigation a React Native Navigation. Můžete je použít k implementaci některých z těchto běžných navigačních vzorů ve vaší aplikaci.

6. Zmenšete velikost aplikace pomocí dělení kódu a líného načítání

Velikost aplikace je důležitá pro optimalizovaný výkon, protože může ovlivnit aspekty uživatelského prostředí, jako je počáteční doba načítání, využití paměti a úložný prostor.

Rozdělení kódu a líné načítání jsou techniky, které mohou snížit velikost vaší aplikace React Native a zlepšit výkon.

Rozdělení kódu je proces rozdělení velké základny kódu JavaScript na menší, lépe ovladatelné „balíčky“. To může výrazně zkrátit počáteční dobu načítání aplikace.

Líné načítání je technika, která vám umožňuje načítat komponenty podle toho, jak k nim uživatel přejde, nikoli při spuštění. To může pomoci snížit množství paměti, kterou vaše aplikace využívá, a zlepšit celkový výkon.

Proč je optimalizace výkonu důležitá

Optimalizace výkonu je zásadní pro úspěch jakékoli mobilní aplikace. Pomalá aplikace může vést ke špatné uživatelské zkušenosti a v konečném důsledku vést k nízkému zapojení a udržení.

Tyto triky jsou jen několik způsobů, jak můžete zajistit příjemný zážitek pro uživatelskou základnu vaší aplikace.