Właśnie pokazałem ci widok przewijania i już czas puścić i pozbyć się widoku
przewijania, dlaczego? Widok przewijania jest
świetny, jeśli masz przewijany obszar na ekranie,
ale nie jest tak świetny, jeśli masz listę, w której nie wiesz, jak długo będzie lub
która może być bardzo długa.
Teraz, jeśli wiesz, że masz jakąś treść, być może listę danych, ale wiesz, że to tylko
20 elementów, więc prawdopodobnie przekroczy moje granice ekranu, ale nigdy nie będzie więcej niż 20 lub
15 elementów, możesz użyć
widoku przewijania, ale jeśli masz bardzo długie listy, widok przewijania może być bardzo nieefektywny, ponieważ powoduje, że
renderuje z góry wszystkie elementy, nawet te, których nie ma na ekranie.
Oznacza to, że nawet niewidoczne obecnie cele są w pełni renderowane, a przewijanie tak bardzo
długiej listy z dużą ilością elementów lub wykonywanie innych czynności na ekranie może
naprawdę spowolnić działanie aplikacji.
Jeśli masz listę zawierającą setki lub tysiące elementów i wszystkie są zawsze renderowane, nawet jeśli
ich nie widzisz, może to naprawdę spowolnić Twoją aplikację.
Aby to przyspieszyć, w React Native jest wbudowany komponent, który obsługuje takie nieskończone listy lub listy,
które są potencjalnie bardzo długie w bardziej wydajny sposób, i to
jest komponent FlatList, który importujesz również z React Native. FlatList zastępuje widok przewijania, że tak powiem, więc tutaj
możemy po prostu użyć FlatList, który jest elementem samozamykającym się, a FlatList ma dwie ważne właściwości
- pierwszą właściwością jest właściwość danych, w której wskazujesz dane wejściowe, a to powinno
wskazywać na tablicę.
Dlatego wskazuję cele kursu, ponieważ to dane, które chcę przedstawić.
Drugą ważną właściwością jest element renderujący, który przyjmuje funkcję wywoływaną dla każdego elementu w
danych w celu renderowania elementu listy.
Jest to funkcja, która pobierze trochę danych o tym
elemencie, stąd nadam nazwę argumentowi danych elementu, a następnie musi zwrócić komponent,
więc tutaj zwrócę ten sam widok, który
miałem wcześniej, po prostu pozbyłem się instrukcji logika mapowania, więc nadal zwracam ten widok.
Teraz nie musisz już tutaj ustawiać klucza, ale wrócę do tego, w jaki sposób jest on wprowadzany za sekundę.
Więc teraz otrzymujemy dane przedmiotu i dlatego nie mamy tutaj celu.
Dane elementu są bardziej złożonym obiektem, ale tam masz to, co masz, oprócz elementu masz również indeks, więc liczba, pozycja
tego
elementu w tablicy zaczynająca się od 0 i separatory, które pozwoliłyby ci aby w zasadzie dynamicznie
renderować separatory między elementami listy, nie zrobimy tego tutaj, ale elementem będą twoje dane,
więc jeden element z twoich
danych wejściowych i dlatego jest to jeden z naszych celów.
a jeśli to zrobimy i zapiszemy to, nauczmy się teraz React Native, być może tutaj
na iPhonie, aby pomieszać rzeczy i możemy dodać rzeczy tutaj, a jeśli
dodam dużo, a następnie zamknę klawiaturę, mogę przewijać, ale ty ” Zobaczę, że jest ostrzeżenie.
Rozwijamy to, widzimy wirtualizację listy brakujących kluczy dla elementów, więc jest
to kolejne ostrzeżenie związane z kluczami.
Powodem tego jest to, że FlatList automatycznie dodaje klucze do elementów, ale tylko wtedy,
gdy dane, dane wejściowe mają określony kształt, a nasz obecny kształt, w którym po prostu mamy tablicę ciągów,
nie jest obsługiwany. Można oczekiwać, że
kształt nie będzie miał celów, które są po prostu łańcuchami, ale zamiast tego twoja lista jest
listą obiektów, w których musisz mieć właściwość klucza w tym obiekcie, a tutaj faktycznie utworzymy
losowy klucz za pomocą Math . losowo, a następnie przekonwertowałem to na ciąg, ponieważ powinien to być ciąg
i oczywiście
nie jest to całkowicie unikalny, możesz mieć tę samą liczbę losową dwa razy, ale jest
wystarczająca do tego dema tutaj i teraz nie możesz mieć
żadnych innych danych tutaj, w tym
obiekcie klucz jest jedyną konieczną właściwością, więc
tutaj będę miał właściwość value, ale mógłbyś nazwać tę wartość lub
tekst lub cokolwiek
chcesz, pójdę z wartością i to
jest teraz mój wpisany cel.
Tak więc teraz nasza tablica celów kursu jest tablicą obiektów, w których każdy obiekt ma właściwość
klucza i właściwość wartości,
a teraz, jeśli wprowadzimy tę tablicę celów kursu do FlatList, FlatList jest szczęśliwy, ponieważ oczekuje źródła
danych, w którym macie tablicę obiekty, w których każdy obiekt ma kluczową właściwość, a następnie
cokolwiek chcesz. Teraz, aby wyprowadzić
nasze dane, nie wystarczy już uzyskać dostęp do itemData. item, ponieważ item jest teraz przedmiotem, a nie
tylko ciągiem, ale item będzie miał teraz klucz i właściwość value, ponieważ to właśnie tam konfigurujemy, a ja mogę po
prostu uzyskać dostęp do właściwości value w celu wygenerowania tekstu. A teraz, jeśli zapiszemy to, a to przebuduje,
a zatem teraz, jeśli spróbujemy to jeszcze raz przy pomocy Learn React Native, zamknij klawiaturę, zobaczysz, że nie otrzymujemy już
ostrzeżenia i nadal możemy przewijać to, oczywiście, tutaj nie pojawia się błąd, ponieważ teraz
mamy tutaj tę kluczową właściwość. Teraz, jeśli masz dane, w których
nie masz właściwości klucza i nie chcesz jej przekształcać, powiedzmy, że zamiast tego masz identyfikator, który spowodowałby ostrzeżenie, jak
widać, jeśli
to przetestuję, otrzymamy ostrzeżenie tutaj , w takim przypadku możesz również dodać inną właściwość do
FlatList oprócz danych i elementu renderowania, możesz dodać właściwość wyodrębniającą klucz, która przyjmuje funkcję, która informuje
FlatList, jak wyodrębnić klucz i domyślnie logika jest taka w przedmiocie i poszukaj właściwości klucza, ale
teraz z ekstraktorem kluczy możesz to zmienić. Narzędzie do pobierania kluczy przyjmuje funkcję, która przyjmuje dwa argumenty - przedmiot, na który patrzy,
oraz indeks tego elementu, a teraz musisz zwrócić klucz i domyślnie szukałby elementu. klucz, więc jest to
domyślna logika, której nie trzeba dodawać.
Teraz tutaj zmieniam klucz lub unikatowy identyfikator na rekwizyt ID i dlatego zmienię to w ekstraktorze kluczy,
aby uzyskać identyfikator jako klucz, a teraz pozbywacie się ostrzeżenia, ponieważ
informujesz React Native's FlatList, jak uzyskać unikalny klucz dla każdego elementu na liście.
Więc teraz, jeśli ponownie nauczysz się tutaj React Native i dodamy to, zobaczysz, że działa, możemy to przewinąć
i nie otrzymamy ostrzeżenia. To jest FlatList i powinieneś używać FlatList do
bardzo długich list, do list, w których nie wiesz, jak długo będą, ale gdzie potencjalnie są
bardzo długie, ponieważ daje to lepszą wydajność niż widok przewijania, który z drugiej strony świetnie,
jeśli wiesz, że masz tylko ograniczoną liczbę elementów, które prawdopodobnie przekroczą granice ekranu, ale w
których nie będzie zbyt wiele renderowanych zbędnych elementów poza ekranem.