React Native: FlatList

0.62.2+

0:00W poprtzedniej lekcji zrobiliśmy sobie taką listę która działa całkiem spoko

0:04natomiast no doszliśmy do sporego problemu którym jest no wydajność

0:08tej listy zwłaszcza czas tworzenia tych elementów czyli jeśli klikniemy tutaj dodaj

0:12bardziej to widać w sumie tutaj na androidzie to

0:16widać że tu nam się wszystko w tym momencie krzaczy i nie mamy za bardzo na to wpływu i nie ma

0:20co się dziwić bo jednak jak to jest 1000 elementów i wszystkie muszą być wrzucone do pamięci

0:24i wszystkie muszą być wyrenderowane i na

0:29szczęście taki problem jest jakby od początku

0:33smartfonów to znaczy aplikacje mobilne tak naprawdę SDK powstały

0:37z tego względu że w tamtej chwili po pierwsze prędkość internetu

0:41nie pozwalała na to żeby cały czas wchodzić sobie na nowe strony i żeby to było szybko ładowane

0:45a z drugiej strony moc tych telefonów nie pozwalała na ich szybkie i wydajne

0:49renderowanie więc aplikacje od samego początku były jakby miały

0:54na celu wydajność tak że wydajność to był punkt pierwszy a że

0:58bardzo często dochodziło do tego musieliśmy coś wyświetlać w listach to tam te

1:02rozwiązania były całkiem zaawansowane i

1:06odpowiednio na iOS-ie jest taki mówię to w ramach ciekawostki bo

1:11nie przyda nam się tu w żaden sposób w tej lekcji mieliśmy taki element jak mamy

1:15takie elementy jaki UITableView albo UICollectionView jeśli chciałbyś sobie doczytać

1:19to zachęcam o na androidzie mamy element wcześniej to się nazywało

1:23ListView teraz to jest RecyclerView i te elementy działają na takiej zasadzie że mimo tego

1:27że wyświetlają 1000 elementów na przykład tak jak tutaj są

1:32w stanie wyświetlić 1000 elementów to nie renderują ich naraz one gdzieś tam je chowają i

1:36tak naprawdę wyswietlają tylko te elementy które są widoczne i tak

1:40jak większość komponentów tak jak wam pokazywałem tutaj w

1:44layout manager na podstawie naszego kodu Reactowego jest

1:48generowana generuje kod natywny praktycznie 1 do 1

1:53tak niestety w przypadku tych list nie udało się tego zrobić nie

1:58udało się tego zrobić z tego względu że nasz JS nasz React jest

2:02jednowątkowy i nie dało się tego niestety w żaden sposób spleść

2:06z tym z tą koncepcją wielowątkowości doładowywania w innym wątku elementów

2:10w tych natywnych listach na szczęście jakby twórcy

2:14React Native'a zadbali o to żebyśmy mieli przynajmniej jakiś odpowiednik tego tego

2:18narzędzia i to narzędzie nazywa się FlatList zaimportujmy je sobie

2:23sobie z React Native wcześniej

2:27to się nazywało zdaje się ListView więc jeśli gdzieś zobaczycie ListView w React Native to

2:31tak naprawdę to jest to samo z tą różnicą że ListView już w tej chwili nawet chyba jest

2:36dostępne chyba nawet

2:40można je zaimportować ale powinno być deprecated

2:45dokładnie mamy deprecated raczej już tego nie powinniśmy używać ale w jakiś starych projektach

2:49w starych bibliotekach może to jeszcze być więc to taki protip jeśli byście przeglądali jakiś kod

2:53bioteki którą której chcielibyście użyć i zobaczylibyście tam ListView no

2:57to znaczy że trzeba się zastanowić czy na pewno chcecie jej użyć

3:02okej jak działa ta jak działa to FlatList przede wszystkim to skoro sobie tutaj

3:06ładnie wszystko opakowujemy to zamiast ScrollView zrobimy sobie FlatList natomiast

3:11FlatList nie działa tak że jest jakby kontenerem na wszystkie dzieci

3:15bo w ten sposób i tak musielibyśmy wszystko wyrenderować FlatList jest elementem self-closing

3:19w które musimy podać no tak naprawdę dwie rzeczy

3:23po pierwsze musimy podać naszą listę elementów w formie data to

3:28będą nasze taski a po drugie musimy

3:32podać metodę renderItem w której

3:38będziemy renderować nasz Item czyli na przykład mamy tutaj nasz nazwaliśmy

3:43go ListItem i

3:48on miał propsa info teraz tutaj

3:52dostaniemy coś takiego jak item i

3:56możemy to przekazać tasks i renderItem to

4:02jest funkcja która jako argument przyjmuje wartości

4:06item oraz jeszcze index które mamy i w

4:10niej musimy zwrócić w jaki sposób ma być renderowany nasz item zobaczmy czy to działa jak

4:15widać że nasza lista jest natomiast odświeżmy to sobie coś mi

4:19się tutaj schrzaniło będę musiałbym zupełnie przebudować projekt ale już się nie będę w to bawić więc po prostu sobie zreloaduje

4:25tak samo tutaj i dodajemy sobie

4:29coś tam i popatrzcie okej trwało to sekundkę wiem no nie

4:33sekundkę ułamek sekundy ale trwało natomiast no jest to nieporównywalnie szybsze z tym co

4:38było w przypadku ScrollView dodajmy sobie ADD tyle tak mamy

4:42tutaj 1000 elementów zauważcie jedną rzecz zauważcie gdzie się znajduje scroll indicator

4:47jeśli popatrzycie sobie na poprzednią lekcję zobaczycie że on w tym momencie na pięćdziesiątym elemencie

4:51byłby gdzieś tutaj no bo faktycznie mamy jeszcze mnóstwo rzeczy do przescrollowania

4:55natomiast FlatLista działa trochę tak jak właśnie ta natywna lista to znaczy

4:59ona FlatLista stara się nie randerować nie wyświetlać rzeczy których nie widzi w zwiazku z tym

5:03jak ja sobie tutaj scrolluję to zauważcie że to jest doładowywane cały czas i to pozwala nam

5:08na ościągnięcie dużo większego performance'u i tak naprawdę w każdej liście w której nie wiemy ile

5:12będzie elementów ale przeczuwamy że będzie ich więcej niż 10 20 warto

5:16zastosować FlatListę zamiast ScrollView co

5:21jeszcze jest istotne odświeżymy sobie zauważcie że tutaj

5:28dostajemy komunikat VirtualizedList missing keys for items make sure to specify a key id

5:32zobaczmy sobie nasz komunikat make sure to specify

5:37a key id properity on each item or provide a custom keyExtractor to

5:41jest tutaj nam React Native mówi o tym że fajnie

5:45jak byśmy dodali coś takiego jak key do naszych elementów bo on byłby w stanie lepiej zarządzać tym

5:49który obiekt tak naprawdę jest którym i trochę trochę lepiej je

5:53wyświetlać czemu tu jest VirtualizedList a nie FlatList ponieważ FlatList

5:58to jest tylko jakby uproszczenie VirtualizedList jeśli chcielibyście

6:02zrobić troszeczkę bardziej zaawansowaną listę i potrzebowalibyście trochę niżej

6:07poziomowych elementów to moglibyście właśnie z takiej VirtualizedList

6:12skorzystać natomiast wszystko to co ma VirtualizedList ma też FlatList tylko po prostu

6:16pewne parametry ma już wypełnione z defaultu więc to co

6:20co zrobić żeby troszkę to przyśpieszyć a właściwie na tę

6:24chwilę to po prostu pozbyć się tego warningu to musimy dodać sobie dodać

6:29sobie taką funkcję to ona przyjmuje item zdaje się że index i

6:34musimy zwrócić na przykład index.toString to

6:40po prostu z automatu możecie robić nie powinno okej

6:45zobaczmy czy się pozbyliśmy komunikatu okej

6:52tak pozbyliśmy się komunikatu jesli sobie dodamy

6:56te elementy to zauważcie że dalej jest wszystko super i pewnie podobnie jest na androidzie

7:00dodajmy

7:05super jest okej jest fajnie nasza

7:10lista już jest poprawna fajne jest to że ta lista okej

7:14zrobiliśmy to w ten sposób i warto zwrócić uwagę na jedną rzecz tutaj nazwa

7:19tej funkcji renderItem to znaczy to nie znaczy że nasz

7:24element jest tutaj tworzony tak jak było w przypadku map i ScrollView tylko to znaczy że

7:28nasz element w tym momencie jest renderowany to jest metoda która mówi i jaki sposób renderować ten item

7:32w związku z tym on wykorzystuje ją w trakcie scrolla do renderowania

7:36kolejnych elementów ale nie co nie znaczy że renderuje wszystkie naraz dlatego musimy

7:41mieć tą metodę jakby wyeksportowaną tutaj jakby czemu jak to optymalizować powiemy sobie w

7:45następnej lekcji ale jeszcze tutaj chciałem wspomnieć o paru parametrach najprostszych

7:49propsach które mamy własnie na tej liście które mogą sprawić że

7:54w pewnych case'ach będzie nam po prostu łatwiej z nich korzystać

7:58lub zwiększają jej możliwości takim podstawowym bardzo prostym jest dodanie

8:02takiej opcji inverted i to sprawia że nasza lista

8:06jest odwrócona zauważcie że zaczynamy od ostatniego elementu tak

8:11i scrollujemy ją w drugą stronę jak zjadę na dół to znaczy to już będziemy na elemencie

8:15zerowym już prawie jesteśmy świetnie i teraz kiedy się to może przydać w praktyce

8:21przydało mi się to raz w aplikacji z czatem gdzie te wiadomości szły

8:25od góry można było je doładowywać do góry a najnowsza pojawiała się na dole

8:29i oczywiście można byłoby to zaimplementować po prostu odwracając elementy w liście

8:33i troszkę zmieniając właściwości scrolla ale skoro mamy to coś takiego gotowego

8:38to też warto z tego skorzystać ale nie będziemy tego aż tutaj obracać

8:42inną fajną rzeczą którą z której można skorzystać jest coś jak numCollumns

8:46i to sprawia że możemy sobie w bardzo łatwy sposób zrobić

8:50grida komunikat który tutaj się który dostaliśmy

8:55wynika z tego że nie możemy tego parametru zmieniać w trakcie lotu bo po prostu tego nasz

8:59fast refresh nie ogarnia więc to musimy zreload'ować i

9:04tadam nic się nie dzieje to wynika z tego że nasz ListItem

9:08ma width 100% więc nic

9:12z tym nie zrobimy ale jesli na przykład byśmy dali tutaj mu width 30 pixeli

9:16dajmy może 50 żeby nie było aż tak źle to zauważcie

9:20że mamy naszego grida tak mamy nasze elementy obok siebie możemy dodać mu na przykład

9:24margin-right 5 pixeli

9:32i fajnie mamy coś takiego jeśli chcielibyśmy powiedzmy zrobić

9:36żeby to było bardziej dynamiczne to możemy tak usunąć tutaj naszego widtha usunąć

9:41ten margines w tej chwili elementy będą

9:46po prostu się dopasowywały do szerokość tekstu do długość tekstu

9:50i możemy sobie skorzystać z Dimensions co to jest

9:54Dimensions już o tym mówię Dimensions o to jest taki moduł

10:00który pozwala na wyciągać tak kilka informacji o systemie jednym z nich

10:04jest właśnie get window możemy sobie wyciągnąć rozmiar naszego

10:08okna to nam zwróci rozmiar okna naszego roboczego

10:13czyli właściwie smartfona jeśli na przykład tak zgodnie ze szkołą chcielibyśmy poznać

10:17szerokość na przykład Headera no to mamy taką metodę jak onLayout

10:21zdaje się i w tej metodzie dostaniemy to jest funkcja która będzie wywołana

10:25w momencie kiedy ten Layout się zmieni i teoretycznie wypadałoby z niej korzystać

10:30ale na poczet tej lekcji pójdziemy na łatwiznę i zrobimy sobie coś takiego i

10:34zrobimy sobie tak zrobimy sobie taką const tutaj numCollumns

10:38to się równa 3 const itemWidth

10:42to się równa width przez numCollumns okej

10:47i popatrzmy zrobimy sobie to tak i

10:52tutaj na siłę przekażemy

10:56width to sie równa width chyba tak to nazwałem czyli ten width i ten width

11:02to nazwałem no właśnie okej

11:07ale jeszcze sobie przekażmy te style żeby on nie wiedział jak ma tutaj wyświetlać że

11:13ma korzystać też ze stylów przekazanych okej no dobra

11:17teraz to sprawdźmy no

11:22niestety ListItem ach

11:28oczywiście był tu błąd okej i widzicie teraz

11:32nam się itemy ładnie tutaj dopasowały są równej szerokości jeśli zmienimy sobie w tej chwili o

11:37na przykład na 4 kolumny to oczywiście

11:41nie może być robione w locie to widzicie że musimy

11:47to odświeżyć aha no tak po

11:51prostu 4 kolumny a trzy elementy więc dajmy na szybko last

11:57okej i teraz mamy tak i się nam te elementy dopasowują jeśli

12:01dodam ten miliard elementów czy tam z 1000 zauważcie że też nam się to zrobi tak

12:06i mamy takiego grida po kolei 78 89 90 91 i fajnie

12:10i to też się może kiedyś przydać jak .................. troche krótsza

12:15spoko natomiast tutaj teraz nam się to za bardzo nie przyda myślę

12:19że możemy sobie to też usunąć i wrócić do tego co było wcześniej czyli raz dwa trzy

12:24tasks currentText żebyśmy mogli dodawać

12:28z tego nie będziemy korzystać sobie to usuniemy

12:32to też sobie usuniemy ListItem

12:37to sobie też usuniemy nie będzie nam to potrzebne już zobaczmy

12:42czy to nam działa działa okej ostatnią

12:48rzeczą którą chciałem pokazać na liście na naszej FlatList'cie to są to jest

12:53Header i Footer czyli możemy sobie w łatwy sposób ListHeader

12:57Component i

13:02na przykład zróbmy sobie tutaj Text Header

13:08i odpowiednio Footer

13:13zobaczmy jak to będzie wyglądało no

13:17i mamy tak jakby to są elementy które będą się trzymać czyli ten Header który mamy tutaj chcemy

13:21żeby zawsze był przypięty więc jest po prostu nad tą listą ale jeśli chcielibyśmy mieć na przykład przypięty

13:26do jako element zerowy i element n plus 1 no

13:30to możemy sobie użyć tych dwóch komponentów i to wyglada całkiem spoko i generalnie

13:35jeśli chodzi o tą listę to tyle ona zawiera dużo więcej parametrów

13:39ale o tym sobie trochę opowiemy też w następnej lekcji