Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Korzystanie z aplikacji mobilnej powinno być przyjemnym doświadczeniem, bez frustrujących opóźnień. Jako programista React Native bardzo ważne jest, aby zoptymalizować swoje aplikacje, aby działały dobrze i były łatwe w użyciu. Szczytowa wydajność aplikacji wymaga pisania czystego i wydajnego kodu przy użyciu odpowiednich narzędzi i bibliotek.

Zapoznaj się z tymi wskazówkami i technikami optymalizacji wydajności aplikacji React Native.

1. Ogranicz niepotrzebne ponowne renderowanie dzięki hookowi useMemo

React Native renderuje komponenty przy użyciu technologii Virtual DOM (VDOM). VDOM śledzi wszystkie zmiany w komponencie aplikacji i ponownie renderuje całą hierarchię widoków, gdy uzna to za konieczne. Ten proces jest kosztowny, dlatego należy unikać niepotrzebnych aktualizacji stanu i właściwości komponentu.

Biblioteka React zapewnia

instagram viewer
użyj Notatka I użyj wywołania zwrotnego haki do rozwiązania tego problemu w komponentach funkcjonalnych. Możesz użyć haka useMemo do zapamiętać wynikową wartość funkcji JavaScript których nie chcesz przeliczać przy każdym renderowaniu.

Oto przykład, jak możesz użyć użyj Notatka hak:

import { użyj notatki } z'reagować';
funkcjonowaćMój komponent({ dane }) {
// Funkcja computeExpensiveValue jest kosztownym obliczeniem
// nie musi być ponownie obliczany przy każdym renderowaniu.
konst drogaWartość = użyjPamięć(() => computeExpensiveValue (dane), [dane]);
// Komponent może używać zapamiętanej wartości bez ponownego obliczania 
// to na każdym renderowaniu.
powrót
{drogaValue}</div>;
}

Zawijanie obliczyćKosztownaWartość funkcjonować wewnątrz użyj Notatka hook zapamiętuje wynik funkcji. The użyj Notatka hook może zaakceptować drugi argument jako zależność. Oznacza to, że zapamiętana funkcja będzie działać ze wzmocnieniem tylko wtedy, gdy zmieni się ta zależność.

użyj wywołania zwrotnego jest podobne do użyj Notatka, ale zapamiętuje funkcję wywołania zwrotnego zamiast wartości. Może to być przydatne do zapobiegania niepotrzebnemu ponownemu renderowaniu komponentów potomnych wyzwalanym przez funkcję wywołania zwrotnego przekazywaną jako rekwizyt.

2. Efektywna obsługa danych o stanie

Złe zarządzanie stanem może prowadzić do niespójności danych, prowadząc do nieoczekiwanego zachowania, które może być trudne do wyśledzenia i naprawienia. Dobre zarządzanie stanem polega na unikaniu przechowywania niepotrzebnych danych w stanie, co może spowolnić aplikację i utrudnić debugowanie. Ważne jest, aby upewnić się, że wszystkie przechowywane stany są absolutnie niezbędne do renderowania komponentu.

Innym sposobem skutecznej aktualizacji stanu jest użycie technik niezmienności, takich jak operator spread lub Obiekt.przypisz() metoda.

Na przykład:

import Reaguj, { stan użycia } z'reagować';
funkcjonowaćMój komponent() {
konst [stan, ustaw stan] = użyj stanu ({
 liczyć: 0,
 tekst: 'Cześć'
 });


funkcjonowaćuchwytKliknij() {
 setState(poprzedni stan => {
powrótObiekt.assign({}, prevState, { liczba: prevState.count + 1 });
 });
 }
powrót (

W tym przykładzie uchwytKliknij funkcja korzysta z ustaw stan hook, aby zaktualizować stan. Mimo to, zamiast bezpośrednio modyfikować obiekt stanu, używa metody Obiekt.przypisz() metodę tworzenia nowego obiektu, który kopiuje poprzedni stan ze zmodyfikowaną właściwością count. Takie podejście pozwala wirtualnemu DOM Reacta na ponowne renderowanie komponentu, gdy wykryje, że zaktualizowałeś stan.

Możesz także użyć biblioteki zarządzania stanem, takiej jak Redux i wbudowany kontekstowy interfejs API wdrożyć tę technikę.

3. Wdrożyć system monitorowania wydajności

Systemy monitorowania wydajności aplikacji mobilnych (PMS) to narzędzia, które pozwalają mierzyć i analizować wydajność aplikacji mobilnych. Zapewniają takie funkcje, jak monitorowanie w czasie rzeczywistym, raportowanie awarii, monitorowanie sieci, metryki wydajności i odtwarzanie sesji użytkownika. Korzystanie z systemu monitorowania wydajności z aplikacją React Native pozwoli Ci zidentyfikować wąskie gardła wydajności, aby naprawić i skalować aplikację.

Oto lista kilku dostępnych narzędzi PMC.

  • React Native Debugger: samodzielna aplikacja, która pozwala debugować i sprawdzać stan aplikacji React Native. Zawiera również monitor wydajności, który pomaga identyfikować i naprawiać problemy z wydajnością.
  • React Native Profiler: to wbudowane narzędzie do monitorowania wydajności umożliwia obserwowanie wydajności aplikacji poprzez mierzenie czasu potrzebnego do renderowania każdego komponentu.
  • Flipper: platforma do tworzenia aplikacji mobilnych z monitorem wydajności, który może pomóc w identyfikacji i rozwiązaniu problemów z wydajnością.
  • Monitorowanie wydajności Firebase: narzędzie do monitorowania wydajności dostarczane przez Firebase, które umożliwia śledzenie wydajności aplikacji na różnych urządzeniach i platformach.

4. Usuń instrukcje Console.log

Uruchomiona instrukcja console.log wysyła komunikat do mechanizmu JavaScript w celu zarejestrowania komunikatu w konsoli. Następnie silnik JS potrzebuje czasu na przetworzenie i wyświetlenie wiadomości.

Zbyt wiele instrukcji konsoli w kodzie spowolni jego wykonywanie i spowoduje opóźnienia w działaniu. Może to być szczególnie problematyczne, gdy Twoja aplikacja działa na urządzeniu o ograniczonych zasobach, takim jak urządzenie mobilne z niższej półki.

5. Zbuduj wydajny system nawigacji

Dobry system nawigacji poprawi ogólną strukturę Twojej aplikacji React Native, ułatwiając konserwację, aktualizację funkcji i efektywne przekazywanie danych o stanie. Dodatkowo znacznie ułatwia przełączanie się między wieloma ekranami w aplikacji, poprawiając komfort użytkowania.

Powinieneś wziąć pod uwagę takie czynniki, jak odpowiedni wzorzec nawigacji (oparty na kartach, oparty na stosie, oparty na szufladach itp.), aby pasował do Twojej aplikacji. Weź pod uwagę liczbę ekranów, których oczekujesz w swojej aplikacji i sposób przekazywania między nimi danych o stanie.

Buforowanie jest użyteczną metodą tworzenia niezawodnego systemu nawigacji. Buforowanie umożliwia zapisanie stanu ekranu lub komponentu, gdy użytkownik go opuszcza, a następnie przywrócenie go po powrocie. Pomaga to zminimalizować ilość danych, które trzeba załadować, oraz liczbę ponownych renderowań.

React Native ma kilka dostępnych bibliotek do nawigacji, takich jak React Navigation i React Native Navigation. Możesz ich użyć do zaimplementowania niektórych z tych typowych wzorców nawigacji w swojej aplikacji.

6. Zmniejsz rozmiar aplikacji dzięki dzieleniu kodu i leniwemu ładowaniu

Rozmiar aplikacji jest ważny dla zoptymalizowania wydajności, ponieważ może wpływać na aspekty środowiska użytkownika, takie jak czas początkowego ładowania, użycie pamięci i miejsce do przechowywania.

Dzielenie kodu i leniwe ładowanie to techniki, które mogą zmniejszyć rozmiar aplikacji React Native i poprawić wydajność.

Podział kodu to proces dzielenia dużej bazy kodu JavaScript na mniejsze, łatwiejsze w zarządzaniu „pakiety”. Może to znacznie skrócić początkowy czas ładowania aplikacji.

Leniwe ładowanie to technika, która pozwala ładować komponenty, gdy użytkownik nawiguje do nich, a nie podczas uruchamiania. Może to pomóc zmniejszyć ilość pamięci używanej przez aplikację i poprawić ogólną wydajność.

Dlaczego optymalizacja wydajności jest ważna

Optymalizacja wydajności ma kluczowe znaczenie dla sukcesu każdej aplikacji mobilnej. Powolna aplikacja może prowadzić do złego doświadczenia użytkownika i ostatecznie skutkować niskim zaangażowaniem i retencją.

Te sztuczki to tylko kilka sposobów, które możesz wykorzystać, aby zapewnić przyjemne wrażenia użytkownikom aplikacji.