Jetzt habe ich dir nur die Bildlaufansicht gezeigt und es ist schon Zeit loszulassen und die
Bildlaufansicht loszuwerden, warum? Die Bildlaufansicht ist großartig,
wenn Sie einen scrollbaren Bereich auf Ihrem Bildschirm haben,
aber nicht so großartig, wenn Sie eine Liste haben, in der Sie nicht wissen, wie lang sie sein wird
oder welche möglicherweise sehr lang ist.
Wenn Sie jetzt wissen, dass Sie Inhalte haben, vielleicht eine Liste von Daten, aber Sie wissen, dass es
nur 20 Elemente sind, so dass es wahrscheinlich meine Bildschirmgrenzen überschreitet, aber es wird nie mehr als 20 oder
15 Elemente sein, dann
können Sie aber eine Bildlaufansicht verwenden Wenn Sie sehr lange Listen haben, kann eine Bildlaufansicht sehr ineffizient sein, da sie
alle Elemente im Voraus rendert, auch diejenigen, die nicht auf dem Bildschirm angezeigt werden.
Das bedeutet, dass selbst die Ziele dort unten, die derzeit nicht sichtbar sind, vollständig gerendert werden. Wenn Sie
eine so lange Liste mit vielen Elementen scrollen oder etwas anderes auf dem Bildschirm tun, kann
dies Ihre App wirklich verlangsamen.
Wenn Sie eine Liste mit Hunderten oder Tausenden von Elementen haben und diese immer gerendert werden, auch
wenn Sie sie nicht sehen, kann dies Ihre App wirklich verlangsamen.
Um dies zu beschleunigen, ist in React Native eine Komponente integriert, die solche unendlichen Listen oder
Listen, die möglicherweise sehr lang sind, effizienter verarbeitet. Dies ist
die FlatList-Komponente, die Sie auch aus React Native importieren. FlatList ersetzt sozusagen die Bildlaufansicht. Hier können wir
also einfach FlatList verwenden, ein selbstschließendes Element, und FlatList hat zwei wichtige Eigenschaften: Die erste Eigenschaft
ist die Dateneigenschaft, auf die Sie auf Ihre Eingabedaten zeigen, und diese sollte auf
ein Array zeigen.
Hier zeige ich also auf Kursziele, da dies die Daten sind, die ich ausgeben möchte.
Die zweite wichtige Eigenschaft ist das Rendern eines Elements, das eine Funktion übernimmt, die für jedes Element in Ihren
Daten aufgerufen wird, um ein Listenelement zu rendern.
Dies ist eine Funktion, die einige Daten zu diesem Element
abruft. Daher benenne ich die Argumentelementdaten und muss dann eine Komponente zurückgeben. Hier gebe
ich also die gleiche Ansicht zurück, die ich
zuvor hatte. Entfernen Sie einfach das Handbuch Zuordnungslogik, daher werde ich diese Ansicht trotzdem zurückgeben.
Jetzt müssen Sie hier keinen Schlüssel mehr festlegen, aber ich werde gleich darauf zurückkommen, wie dieser Schlüssel eingegeben wird.
Jetzt bekommen wir hier die Artikeldaten und deshalb haben wir hier nicht mehr das Ziel.
Elementdaten sind ein komplexeres Objekt, aber dort haben Sie eine Elementeigenschaft. Neben Element haben Sie auch den Index, also die
Nummer,
die Position dieses Elements im Array ab 0 und Trennzeichen, die Sie zulassen würden Um Trennzeichen
zwischen Listenelementen dynamisch zu rendern, werden wir hier nicht etwas tun, sondern Element sind
Ihre Daten. Ein Element aus
Ihren Eingabedaten und das hier ist daher eines unserer Ziele.
und wenn wir das tun und dies speichern, lernen wir jetzt React Native, vielleicht hier auf dem
iPhone, um die Dinge zu verwechseln, und wir können hier Dinge hinzufügen. Wenn ich viel
hinzufüge und dann die Tastatur schließe, kann ich scrollen, aber Sie. Ich werde sehen, dass es eine Warnung gibt.
Wenn wir dies erweitern, sehen wir, dass in der Virtualisierungsliste Schlüssel für Elemente fehlen, sodass
dies eine weitere Warnung in Bezug auf Schlüssel ist.
Der Grund dafür ist, dass FlatList Ihren Elementen automatisch Schlüssel hinzufügt, aber nur wenn Ihre
Daten, Ihre Eingabedaten eine bestimmte Form haben und unsere aktuelle Form, in der wir einfach ein Array von Zeichenfolgen
haben, nicht unterstützt wird. Die erwartete Form
ist, dass Sie keine Ziele haben, die nur Zeichenfolgen sind, sondern dass Ihre Liste eine Liste von
Objekten ist, für die Sie eine Schlüsseleigenschaft in diesem Objekt haben müssen. Hier erstellen wir
jetzt mit Math einen zufälligen Schlüssel . zufällig und dann konvertiere ich dies in eine Zeichenfolge, da es eine Zeichenfolge sein
sollte und
das natürlich nicht vollkommen eindeutig ist. Sie haben möglicherweise zweimal dieselbe Zufallszahl, aber es ist gut genug
für diese Demo hier und jetzt können Sie keine anderen Daten
haben Hier, in diesem Objekt, ist der
Schlüssel die einzige Must-Have-Eigenschaft. Hier habe ich
also eine Value-Eigenschaft, aber Sie hätten diesen Wert oder Text benennen können,
oder was auch immer
Sie wollen. Ich gehe mit Value und
das ist jetzt mein eingegebenes Ziel.
Jetzt ist unser Kursziel-Array hier ein Array von Objekten, bei denen jedes Objekt eine Schlüsseleigenschaft und eine
Werteigenschaft hat. Wenn wir
dieses Kursziel-Array nun in FlatList einspeisen, ist FlatList glücklich, weil es eine Datenquelle erwartet, in der Sie
ein Array von haben Objekte, bei denen jedes Objekt eine Schlüsseleigenschaft hat und dann alles, was
Sie wollen. Um unsere Daten
auszugeben, reicht es nicht mehr aus, auf itemData zuzugreifen. item, weil item jetzt ein Objekt und nicht
mehr nur eine Zeichenfolge ist, sondern item jetzt einen Schlüssel und eine value-Eigenschaft hat, da wir diese dort einrichten und
ich einfach auf die value-Eigenschaft zugreifen kann, um den Text auszugeben. Und jetzt, wenn wir dies und diese Neuerstellungen speichern
und daher jetzt, wenn wir dies erneut mit Learn React Native versuchen, die Tastatur schließen, sehen Sie, dass wir keine Warnung mehr erhalten
und wir können dies natürlich immer noch scrollen, wir erhalten auch hier keinen Fehler, weil
Jetzt haben wir diese Schlüsseleigenschaft hier. Wenn Sie Daten haben, für die Sie keine
Schlüsseleigenschaft haben und diese nicht transformieren möchten, nehmen wir an, Sie hätten stattdessen eine ID, die eine Warnung auslösen würde, wie Sie sehen
können, wenn ich
dies teste. Wir erhalten die Warnung hier In diesem Fall können Sie FlatList neben Daten und Renderelement auch
eine weitere Eigenschaft hinzufügen. Sie können auch die Schlüsselextraktionseigenschaft hinzufügen, die eine Funktion übernimmt, die FlatList mitteilt, wie Ihr Schlüssel extrahiert
werden soll. Standardmäßig lautet die Logik: Ich werde einen Blick darauf werfen Klicken Sie im Element auf eine Schlüsseleigenschaft,
aber jetzt mit dem Schlüsselextraktor können Sie dies ändern. Der Schlüsselextraktor verwendet eine Funktion, die zwei Argumente akzeptiert - das betrachtete Element und den Index dieses
Elements. Jetzt müssen Sie einen Schlüssel zurückgeben, und standardmäßig wird nach dem Element gesucht. Schlüssel, das ist also
die Standardlogik, die Sie nicht hinzufügen müssen.
Jetzt ändere ich hier den Schlüssel oder die eindeutige Kennung, um auf einer ID-Requisite zu sein, und daher werde ich dies dort unten im Schlüsselextraktor
ändern, um die ID als Schlüssel zu erhalten, und jetzt werden Sie damit auch die Warnung los, weil Sie
informieren die FlatList von React Native darüber, wie Sie für jedes Element in Ihrer Liste einen eindeutigen Schlüssel
erhalten.
Wenn Sie hier also wieder React Native lernen und dies hinzufügen, werden Sie sehen, dass dies funktioniert. Wir können dies scrollen
und erhalten auch keine Warnung. Das ist also FlatList, und Sie sollten FlatList für sehr
lange Listen verwenden, für Listen, bei denen Sie nicht wissen, wie lang sie sein werden, bei denen sie
jedoch möglicherweise sehr lang sind, da Sie dadurch eine bessere Leistung erzielen als bei einer Bildlaufansicht Großartig,
wenn Sie wissen, dass Sie nur eine begrenzte Anzahl von Elementen haben, die wahrscheinlich über Ihre Bildschirmgrenzen hinausgehen,
aber nicht zu viele redundante Elemente außerhalb des Bildschirms gerendert werden.