React Native: Optymalizacja FlatList

0.62.2+

0:00Czyli w ostatniej lekcji robiliśmy sobie jakąś listę pokazaliśmy

0:04sobie jakie tutaj użyliśmy różnych propsów jakie dana lista nam daje i chciałem

0:08wam pokazać jeszcze w tej chwili taką rzecz na którą zapewne na początku nie natraficie

0:12ale warto warto gdzieś tam z tyłu głowy to mieć chodzi tutaj o

0:16optymalizację tej listy znaczy tak jak samo FlatList zoptymalizowało nam

0:21działanie tego dość diametralnie tak sama FlatLista sama

0:26w sobie też jest do zoptymalizowania w pewnych case'ach żeby

0:30to pokazać to wrócimy sobie do naszego przykładu który usunąłem

0:34ale to zaraz odtworzymy wygenerujemy

0:45sobie trochę elementów

0:50ważna rzecz to jest funkcja Array

0:54from Array map okej sprawdźmy to okej

1:04i wyrendrowało mam całkiem dużo elementów i spoko to samo

1:08możemy tutaj zrobić w androidzie i zapewne jak będziemy

1:13teraz scrollować tak jest to nasza lista działa całkiem fajnie natomiast chciałbym żebyśmy

1:18zwrócili uwagę na jedną rzecz przejdźmy sobie do naszego do flippera

1:23React Native okej i

1:28zauważcie tak jak mówiłem na początku ta metoda ona

1:33mówi nam o renderowaniu elementów czyli kiedy ten element jest renderowany a nie kiedy

1:37tworzony i zobaczmy kiedy tak naprawdę te elementy są

1:41renderowane czyli próbujmy to sobie Render

1:47list item i przekażmy nazwę

1:51tego itemu zobaczmy co tu się co

1:56tu się stanie nic się nie dzieje uruchomimy sobie flippera

2:01jeszcze raz możliwe że gdzieś tam nam się pogubił

2:18okej mamy dodam tutaj Elem

2:23patrzcie co się dzieje w

2:27trakcie pisania tekstu czyli kiedy zmienia nam się nasz state

2:31naszej listy tutaj dokładnie

2:37tutaj czyli kiedy zmieniam currentText za każdym razem

2:41renderuje się renderują się wszystkie elementy listy to uwaga

2:46co się stanie jak ja dodam tutaj dodam te elementy

2:50zauważcie co się dzieje tak wszystkie te elementy są

2:55renderowane jeśli ja to zacznę pisać to one wszystkie

2:591000 elementów jest renderowane na tym może symulatorze iOS-a może to nie będzie widoczne ale

3:04tutaj już być może zacznie się coś ciąć a na pewno te

3:08logi temu nie pomogą tak i tutaj jest oczywiście

3:12problem typowo Reactowy nie ma jakiegoś większego związku z React

3:16Nativem natomiast o dostaliśmy nawet komunikat chciałbym

3:21do niego dobrze mieć o you have a large list

3:25that is slow to update make sure you renderIthem function render component that follow React

3:30performance best practices like Pure Component i dokładnie to jest sedno

3:34od którego musimy zacząć naszą optymalizację i tak naprawdę jeśli wiemy że ta lista będzie dynamiczna

3:38i będzie miała wiecej elementów to od tego musimy zacząć to znaczy

3:42nasz element listy powinien być pure nad komponentem w

3:46przypadku elementów klasowych oczywiście musielibyśmy nadpisać

3:50metodę suit update suit component update

3:54natomiast w przypadku komponentów funkcyjnych z których ja korzystam mamy taką metodę

3:59jak memo która nam tak naprawdę z tego komponentu po

4:03prostu robi pure component

4:07wyczyśćmy sobie logi odświeżmy

4:13aplikację zauważcie co się dzieje zaczynam

4:18pisać nic się nie dzieje dopiero jak dodam to

4:23zaczynają być te compenty renderowane tak i to jest pierwsza rzecz o której należy pamiętać

4:27i pokażę jeszcze jeden case o którym równie łatwo można

4:31zapomnieć załóżmy że chcielibyśmy żeby tym i tym

4:35się dało kliknąć czyli co zrobimy zmieniamy sobie to na TouchableOpacity

4:39tutaj dodajemy onPress

4:44i przekażmy jakiegoś propsa

4:49onItemPress okej

4:53i tutaj na przykład zróbmy tak żeby w tym onItemPress

4:57przekazywać nasze info na naszej

5:03liście natomiast tutaj dodamy sobie tak dodamy sobie tutaj metodę

5:07do obsługi tego i

5:18tutaj a damy jakiegoś loga

5:29onItemPress onItemPress

5:33świetnie bailando czyścimy

5:37logi odpalmy na nowo zreload'ujmy nasz

5:42projekt zaczynam pisać no i

5:46kurczę znowu wszystkie elementy zaczynają się renderować w momencie pisania czemu

5:50tak jest no to jest oczywiście problem samych hooks'ów a nie React Native'u czy nawet

5:54właściwie samego Reacta jak ale

5:58ławo o tym zapomnieć i tak jak często nie robi to wielkiej różnicy bo

6:02React sam w sobie jest szybki i React Native sam w sobie też jest bardzo szybki i sprawdzanie

6:07ktore elementy się zmieniły jak je renderować to nie jest jakiś olbrzymi problem to że wywołała

6:11nam się ta funkcja to nie znaczy że ten element nam się faktycznie wyrenderował aczkolwiek wymagało

6:16to jakiegoś zasobu a zwłaszcza jak lista jest długa no i teraz w

6:20czym jest problem no problem jest w tym że nasz

6:24Pure Component widzi za każdym razem zmianę item pressu dlaczego dlatego

6:28że ta funkcja z każdym renderem tej funkcji jest tworzona nowa tak

6:33jeśli byśmy na przykład w drugim argumencie naszego memo na

6:37sztywno zahardkodowali zmianę true odświeżmy sobie

6:41tą listę reload wyczyśćmy

6:45to w tej chwili już problemu nie ma tak no tylko że wtedy do końca nie

6:49wiemy jak mamy tą listę odświeżać tak to znaczy

6:54jesli coś by sie w tej liście zmieniło w tym elemencie tej listy no to on

6:58i tak by się nie nie odświeżył teraz jak sobie z

7:02tym poradzić najlepiej znaczy właśnie najlepiej jedyna

7:06właściwa opcja to jest użycie useCallbacka i tak jak mówiłem

7:11raczej nie będę się tutaj skupiać na tych typowo hooksowych

7:15czy Reactowych rzeczach ale warto warto mieć to z tyłu głowy bo łatwo

7:19o tym zapomnieć a przypadku FlatListy jest to wydajność jest mega istotna to

7:23jest pierwsza rzecz o której trzeba pamiętać żeby na pewno nasz element listy był pure componentem a

7:28jeśli używamy jakichś Callbacków a pewnie używamy to trzeba ja opakować

7:32w useCallback odpalny sobie jeszcze raz nasz komponent znaczy

7:36zbundle'ujmy wszystko no i zauważcie że teraz w trakcie pisania juz jest okej i

7:41to jest pierwsza optymalizacja od której w ogóle powinniśmy zaczynać

7:46natomiast mamy trochę więcej możliwości pierwszy element który

7:50w którym moglibyśmy coś zoptymalizować

7:54to jest windowSize ten windowSize

7:59mówi nam o tym ile widoków

8:03przygotowanych itemów trzymać czyli jeśli na przykład zaznaczylibyśmy

8:08tutaj 1 to to by znaczyło tyle że nasz nasza lista

8:13trzymałaby w pamięci tylko tyle elementów ile mieści się na jednym ekranie

8:17w momencie scrolla dopiero te elementy byłyby tworzone i to będzie

8:21fajnie widać tutaj jeśli dodamy jakieś elementy

8:25i patrzcie widzicie jakby

8:29nie da się nawet do końca scrollować bo te elementy są dopiero tworzone zobaczmy jak to wygląda na iOS-ie

8:34widzicie jakby widać gdzie te elementy są

8:38tworzone i te białe elementy wynikają z tego że

8:42po prostu React nie zdąży tego wyrenderować no bo my robimy szybkiego scrolla a już

8:46żądamy żeby pełen widok był wyrenderowany i dochodzimy tutaj

8:51do takiego momentu w którym często trzeba wyważyć szybkość działania z

8:55płynności działania czyli z niepłynnością działania tylko płynnością wyświetlania czyli z jednej strony chcielibyśmy

9:01żeby lista jak najszybciej działała w naszym przypadku gdzie jest tak prosta

9:05nie będzie z tym problemu ale jeśli elementy byłyby bardziej skomplikowane miały jakieś grafiki na sobie

9:09to byłoby to już bardzo zauważalne zwłaszcza na słabszych telefonach no i w

9:13związku z tym możemy się tym parametrem pobawić i ustawić on domyślnie ma wartość zdaje się że 20 czyli bardzo

9:17dużą natomiast już samo ustawienie 3 powinno trochę tą sytuację poprawić

9:21spróbujmy dodajmy

9:26jakieś elementy okej już jest lepiej tak w sensie widać że

9:30dalej dojeżdżamy do momentu gdzie się ta lista kończy i przy szybkim scrollu walimy

9:34powiedzmy o ścianę ale już jest lepiej tak i przy szybkim scrollu w górę też co się dzieje pamietajmy też o tym

9:38że no te logi które są wyświetlane też dodają swoje

9:42bo jednak trzeba je wyświetlić w trakcie takiego scrolla dzieje się to co pokazywałem o

9:46widzieliście te białe obszary to jest dokładnie to o czym mówiłem w przypadku

9:50bridge'a tak znaczy sie ta komunikacja bridge'owa nie nadąża zwłaszcza

9:55w trybie debugowym gdzie dużo więcej rzeczy jest przesłanych i mniej rzeczy jest zoptymalizowanych

9:59i jeszcze wyswietlane sa logi więc jeśli

10:03będziecie mieli problem z listą no to to jest pierwsza rzecz którą można

10:07się pobawić inny element to jest removeClippedSubviews

10:12i ten element to jest odpowiedzialne

10:16za pamięć tak czyli można napisać że to jest memory czyli

10:20to nam będzie trzymało tylko tyle ekranów z tymi itemami w

10:24pamięci natomiast to nam będzie te widoki odczepiać

10:30lub zaczepiać czyli to nie będzie miało aż takiego dużego wpływu na pamięć

10:34ale na wydajność listy już może mieć przy czym warto zdać sobie sprawę

10:38że proszę bardzo tutaj jest opis tego oficjalny

10:43note may have bugs missing content is some circumstances use at your own risk

10:47to jest zwłaszcza widoczne na iOS-ie w pewnych sytuacjach no generalnie

10:51ja bym tego nie używał ale jeśli będziecie mieli problem z wydajnością listy to

10:55warto na taki parametr zerknąć kolejną

11:00rzeczą która może pomóc to jest predefiniowanie rozmiaru

11:05naszych itemów jeśli nasze itemy mają zdefiniowany

11:11rozmiar a w naszym przypadku mają to możemy pozwolić

11:15zamiast pozwalać Reactowi na wyliczanie wysokości

11:19każdego itemu który teraz jest oczywiście na sztywno możemy mu narzucić ten rozmiar

11:23i to napewno przyśpieszy też naszą listę jaki ten layout oczywiście zapomniałem

11:28o jeszcze raz

11:32data index i nie dwukropek tylko równa się

11:36oczywiście o i

11:41teraz tak możemy podać index czyli to będzie akurat nasz index

11:45musimy podać length zdaje się

11:49to jest wysokość czyli nie wiem na przykład 80

11:54to jest nasz na sztywno i możemy podać jeszcze offset czyli

11:59to jest wysokość na której ten element się znajduje no i w naszym wypadku jeśli mamy na sztywno wysokość

12:03to będzie po prostu 80 razy index tak to jest nie

12:07nadążył ESLint świetnie no i ta lista już w tym momencie jest dużo bardziej zoptymalizowana

12:11mówiłem tutaj nie będzie aż tak to widoczne ciężko mi na szybko zrobić taką listę w której byłoby

12:15to widać ale to jest już coś nad tym nad czym

12:19możecie popracować żeby tą listę

12:23poprawić jest jeszcze jedna rzecz o której chciałem powiedzieć jeśli

12:29byśmy sobie to to wyeksportowali

12:34i na przykład na starcie tej listy

12:38dodali jako elementy startowe to zauważcie

12:43odświeżmy to że to też może chwilę potrwać może

12:47tego tu nie będzie aż tak bardzo widać a zwłaszcza że nam android gdzieś tam ucina się ale

12:51może być widać pewien lag zwłaszcza na słabszych urządzeniach i żeby nie

12:55było konieczności w której on musi jakby lista musi analizować czy wyświetlać

12:59tą całą listę nie może jakby nie wyświetla całej ale jednak

13:03musi wziąć pod uwagę całą listę to możemy sobie zrobić coś takiego jak initialNumToRender

13:09i to nam mówi o tym ile elementów tak naprawdę

13:14na starcie ta lista ma wyświetlić warto zrobić mniej więcej tyle ile się

13:18mieści na dwóch ekranach czyli 20 w tym momencie jak

13:22odpalimy sobie aplikację na nowo zbuduje nam się to ten start będzie

13:26dużo szybszy bo ta lista będzie składała się

13:30dopiero z 20 elementów i w trakcie scrollowania ona dopiero zacznie się doładowywać

13:35tych elementów jest dużo więcej pełne pełen opis tego w

13:39jaki sposób sobie radzić z optymalizacją całej listy znajduje się właśnie na

13:43stronie reactnative.dev/docs/optimizing-flatlist-configuration i tutaj mamy mniej więcej

13:47to o czym mówiliśmy czyli initialNumToRender

13:51windowSize i parę innych rzeczy o tym żeby używać właśnie light componentów

13:56żeby używać ComponentUpdate i tak dalej i tak dalej ale mamy też parę innych rzeczy i jeśli

14:01dojdziecie do ściany to warto się czymś takim zainteresować i

14:05poczytaj sobie o tej liście natomiast jest jeszcze jedno rozwiązanie które nie jest oficjalne czyli

14:09nie jest elementem listy FlatListy nazywa się RecyclerListView i to jest element który

14:13mocno bazuje na RecyclerView androidowym i on działa tak że faktycznie

14:17te elementy których nie widzimy są recreate'owane czyli jeśli

14:21ja mam tu element 0 scrolluje tą listę o to w tym momencie ten element 0

14:26zaczyna się pojawiać tutaj tak jakby i cały czas ten tych elementów stworzonych

14:31trzymany w pamięci jest maksymalnie tyle ile jest na ekranie plus minus jakiś tam margines więc

14:35to jest naprawdę szybkie i jesli nasza lista składa się z bardzo powtarzalnych

14:39elementów albo jesteśmy w stanie określić po prostu ich wysokość to to jest super rozwiązanie

14:43czyli tutaj są przykłady takich list w których mamy takie same elementy natomiast sama implementacja jest

14:49trochę bardziej skomplikowana bo wymaga wypełnienia takich rzeczy jak właśnie z góry

14:53predefiniowanie rozmiarów czyli to coś co robiliśmy tutaj i

14:57jeszcze parę innych rzeczy natomiast może być tak że to nam uratuje

15:01skórę i że w sytuacji trochę takie jak nasza tutaj sprawimy że ta lista

15:05będzie dużo bardziej zoptymalizowana myślę że to tyle jeśli chodzi o optymalizację tej listy

15:09tak czy siak mimo tego że to jest całkiem zaawansowana zaawansowany

15:14komponent który jeszcze tak jak mówię dziedziczy po tym bardziej zaawansowanym VirtualizedList to

15:18w praktyce to co nas będzie interesować to są trzy rzeczy ewentualnie jeszcze

15:23ten Header i Footer i to powinniście zapamiętać i wynieść z tej lekcji.