1 00:00:02,360 --> 00:00:08,270 Jetzt habe ich dir nur die Bildlaufansicht gezeigt und es ist schon Zeit loszulassen und die 2 00:00:08,330 --> 00:00:11,000 Bildlaufansicht loszuwerden, warum? Die Bildlaufansicht ist großartig, 3 00:00:11,000 --> 00:00:13,600 wenn Sie einen scrollbaren Bereich auf Ihrem Bildschirm haben, 4 00:00:13,790 --> 00:00:19,490 aber nicht so großartig, wenn Sie eine Liste haben, in der Sie nicht wissen, wie lang sie sein wird 5 00:00:19,490 --> 00:00:21,310 oder welche möglicherweise sehr lang ist. 6 00:00:21,320 --> 00:00:27,440 Wenn Sie jetzt wissen, dass Sie Inhalte haben, vielleicht eine Liste von Daten, aber Sie wissen, dass es 7 00:00:27,440 --> 00:00:33,740 nur 20 Elemente sind, so dass es wahrscheinlich meine Bildschirmgrenzen überschreitet, aber es wird nie mehr als 20 oder 8 00:00:33,740 --> 00:00:35,500 15 Elemente sein, dann 9 00:00:35,750 --> 00:00:42,500 können Sie aber eine Bildlaufansicht verwenden Wenn Sie sehr lange Listen haben, kann eine Bildlaufansicht sehr ineffizient sein, da sie 10 00:00:42,500 --> 00:00:47,510 alle Elemente im Voraus rendert, auch diejenigen, die nicht auf dem Bildschirm angezeigt werden. 11 00:00:47,510 --> 00:00:53,220 Das bedeutet, dass selbst die Ziele dort unten, die derzeit nicht sichtbar sind, vollständig gerendert werden. Wenn Sie 12 00:00:53,300 --> 00:00:58,520 eine so lange Liste mit vielen Elementen scrollen oder etwas anderes auf dem Bildschirm tun, kann 13 00:00:58,910 --> 00:01:00,620 dies Ihre App wirklich verlangsamen. 14 00:01:00,650 --> 00:01:05,870 Wenn Sie eine Liste mit Hunderten oder Tausenden von Elementen haben und diese immer gerendert werden, auch 15 00:01:05,870 --> 00:01:09,500 wenn Sie sie nicht sehen, kann dies Ihre App wirklich verlangsamen. 16 00:01:09,500 --> 00:01:16,130 Um dies zu beschleunigen, ist in React Native eine Komponente integriert, die solche unendlichen Listen oder 17 00:01:16,130 --> 00:01:20,460 Listen, die möglicherweise sehr lang sind, effizienter verarbeitet. Dies ist 18 00:01:20,510 --> 00:01:28,580 die FlatList-Komponente, die Sie auch aus React Native importieren. FlatList ersetzt sozusagen die Bildlaufansicht. Hier können wir 19 00:01:28,580 --> 00:01:35,960 also einfach FlatList verwenden, ein selbstschließendes Element, und FlatList hat zwei wichtige Eigenschaften: Die erste Eigenschaft 20 00:01:36,050 --> 00:01:42,770 ist die Dateneigenschaft, auf die Sie auf Ihre Eingabedaten zeigen, und diese sollte auf 21 00:01:42,770 --> 00:01:44,570 ein Array zeigen. 22 00:01:44,600 --> 00:01:49,610 Hier zeige ich also auf Kursziele, da dies die Daten sind, die ich ausgeben möchte. 23 00:01:49,610 --> 00:01:57,170 Die zweite wichtige Eigenschaft ist das Rendern eines Elements, das eine Funktion übernimmt, die für jedes Element in Ihren 24 00:01:57,170 --> 00:02:00,840 Daten aufgerufen wird, um ein Listenelement zu rendern. 25 00:02:00,850 --> 00:02:04,060 Dies ist eine Funktion, die einige Daten zu diesem Element 26 00:02:04,060 --> 00:02:08,410 abruft. Daher benenne ich die Argumentelementdaten und muss dann eine Komponente zurückgeben. Hier gebe 27 00:02:08,410 --> 00:02:11,470 ich also die gleiche Ansicht zurück, die ich 28 00:02:11,470 --> 00:02:16,270 zuvor hatte. Entfernen Sie einfach das Handbuch Zuordnungslogik, daher werde ich diese Ansicht trotzdem zurückgeben. 29 00:02:16,270 --> 00:02:21,670 Jetzt müssen Sie hier keinen Schlüssel mehr festlegen, aber ich werde gleich darauf zurückkommen, wie dieser Schlüssel eingegeben wird. 30 00:02:21,670 --> 00:02:27,060 Jetzt bekommen wir hier die Artikeldaten und deshalb haben wir hier nicht mehr das Ziel. 31 00:02:27,190 --> 00:02:35,820 Elementdaten sind ein komplexeres Objekt, aber dort haben Sie eine Elementeigenschaft. Neben Element haben Sie auch den Index, also die 32 00:02:35,820 --> 00:02:36,840 Nummer, 33 00:02:36,840 --> 00:02:44,180 die Position dieses Elements im Array ab 0 und Trennzeichen, die Sie zulassen würden Um Trennzeichen 34 00:02:44,180 --> 00:02:50,270 zwischen Listenelementen dynamisch zu rendern, werden wir hier nicht etwas tun, sondern Element sind 35 00:02:50,270 --> 00:02:52,340 Ihre Daten. Ein Element aus 36 00:02:52,340 --> 00:02:57,080 Ihren Eingabedaten und das hier ist daher eines unserer Ziele. 37 00:02:57,230 --> 00:03:02,920 und wenn wir das tun und dies speichern, lernen wir jetzt React Native, vielleicht hier auf dem 38 00:03:03,180 --> 00:03:08,430 iPhone, um die Dinge zu verwechseln, und wir können hier Dinge hinzufügen. Wenn ich viel 39 00:03:08,670 --> 00:03:14,700 hinzufüge und dann die Tastatur schließe, kann ich scrollen, aber Sie. Ich werde sehen, dass es eine Warnung gibt. 40 00:03:15,630 --> 00:03:21,120 Wenn wir dies erweitern, sehen wir, dass in der Virtualisierungsliste Schlüssel für Elemente fehlen, sodass 41 00:03:21,120 --> 00:03:24,450 dies eine weitere Warnung in Bezug auf Schlüssel ist. 42 00:03:24,450 --> 00:03:31,680 Der Grund dafür ist, dass FlatList Ihren Elementen automatisch Schlüssel hinzufügt, aber nur wenn Ihre 43 00:03:31,680 --> 00:03:40,770 Daten, Ihre Eingabedaten eine bestimmte Form haben und unsere aktuelle Form, in der wir einfach ein Array von Zeichenfolgen 44 00:03:40,900 --> 00:03:45,130 haben, nicht unterstützt wird. Die erwartete Form 45 00:03:45,150 --> 00:03:53,910 ist, dass Sie keine Ziele haben, die nur Zeichenfolgen sind, sondern dass Ihre Liste eine Liste von 46 00:03:54,390 --> 00:04:02,640 Objekten ist, für die Sie eine Schlüsseleigenschaft in diesem Objekt haben müssen. Hier erstellen wir 47 00:04:02,640 --> 00:04:09,560 jetzt mit Math einen zufälligen Schlüssel . zufällig und dann konvertiere ich dies in eine Zeichenfolge, da es eine Zeichenfolge sein 48 00:04:09,560 --> 00:04:10,420 sollte und 49 00:04:10,430 --> 00:04:14,810 das natürlich nicht vollkommen eindeutig ist. Sie haben möglicherweise zweimal dieselbe Zufallszahl, aber es ist gut genug 50 00:04:14,810 --> 00:04:17,750 für diese Demo hier und jetzt können Sie keine anderen Daten 51 00:04:17,750 --> 00:04:19,610 haben Hier, in diesem Objekt, ist der 52 00:04:19,610 --> 00:04:21,480 Schlüssel die einzige Must-Have-Eigenschaft. Hier habe ich 53 00:04:21,500 --> 00:04:24,610 also eine Value-Eigenschaft, aber Sie hätten diesen Wert oder Text benennen können, 54 00:04:24,640 --> 00:04:25,720 oder was auch immer 55 00:04:26,360 --> 00:04:28,190 Sie wollen. Ich gehe mit Value und 56 00:04:28,190 --> 00:04:29,580 das ist jetzt mein eingegebenes Ziel. 57 00:04:29,590 --> 00:04:36,070 Jetzt ist unser Kursziel-Array hier ein Array von Objekten, bei denen jedes Objekt eine Schlüsseleigenschaft und eine 58 00:04:36,070 --> 00:04:37,720 Werteigenschaft hat. Wenn wir 59 00:04:37,720 --> 00:04:44,320 dieses Kursziel-Array nun in FlatList einspeisen, ist FlatList glücklich, weil es eine Datenquelle erwartet, in der Sie 60 00:04:44,320 --> 00:04:50,800 ein Array von haben Objekte, bei denen jedes Objekt eine Schlüsseleigenschaft hat und dann alles, was 61 00:04:50,800 --> 00:04:52,920 Sie wollen. Um unsere Daten 62 00:04:52,930 --> 00:04:59,020 auszugeben, reicht es nicht mehr aus, auf itemData zuzugreifen. item, weil item jetzt ein Objekt und nicht 63 00:04:59,020 --> 00:05:05,590 mehr nur eine Zeichenfolge ist, sondern item jetzt einen Schlüssel und eine value-Eigenschaft hat, da wir diese dort einrichten und 64 00:05:05,590 --> 00:05:12,490 ich einfach auf die value-Eigenschaft zugreifen kann, um den Text auszugeben. Und jetzt, wenn wir dies und diese Neuerstellungen speichern 65 00:05:12,530 --> 00:05:21,350 und daher jetzt, wenn wir dies erneut mit Learn React Native versuchen, die Tastatur schließen, sehen Sie, dass wir keine Warnung mehr erhalten 66 00:05:21,350 --> 00:05:27,380 und wir können dies natürlich immer noch scrollen, wir erhalten auch hier keinen Fehler, weil 67 00:05:27,380 --> 00:05:32,990 Jetzt haben wir diese Schlüsseleigenschaft hier. Wenn Sie Daten haben, für die Sie keine 68 00:05:32,990 --> 00:05:41,000 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 69 00:05:43,570 --> 00:05:45,160 können, wenn ich 70 00:05:45,760 --> 00:05:52,290 dies teste. Wir erhalten die Warnung hier In diesem Fall können Sie FlatList neben Daten und Renderelement auch 71 00:05:52,290 --> 00:05:59,440 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 72 00:05:59,440 --> 00:06:06,190 werden soll. Standardmäßig lautet die Logik: Ich werde einen Blick darauf werfen Klicken Sie im Element auf eine Schlüsseleigenschaft, 73 00:06:06,190 --> 00:06:12,220 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 74 00:06:12,220 --> 00:06:17,800 Elements. Jetzt müssen Sie einen Schlüssel zurückgeben, und standardmäßig wird nach dem Element gesucht. Schlüssel, das ist also 75 00:06:17,800 --> 00:06:21,740 die Standardlogik, die Sie nicht hinzufügen müssen. 76 00:06:21,940 --> 00:06:29,950 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 77 00:06:29,950 --> 00:06:35,920 ändern, um die ID als Schlüssel zu erhalten, und jetzt werden Sie damit auch die Warnung los, weil Sie 78 00:06:35,920 --> 00:06:41,770 informieren die FlatList von React Native darüber, wie Sie für jedes Element in Ihrer Liste einen eindeutigen Schlüssel 79 00:06:41,770 --> 00:06:42,160 erhalten. 80 00:06:42,670 --> 00:06:53,850 Wenn Sie hier also wieder React Native lernen und dies hinzufügen, werden Sie sehen, dass dies funktioniert. Wir können dies scrollen 81 00:06:54,030 --> 00:07:00,150 und erhalten auch keine Warnung. Das ist also FlatList, und Sie sollten FlatList für sehr 82 00:07:00,360 --> 00:07:05,370 lange Listen verwenden, für Listen, bei denen Sie nicht wissen, wie lang sie sein werden, bei denen sie 83 00:07:05,370 --> 00:07:10,110 jedoch möglicherweise sehr lang sind, da Sie dadurch eine bessere Leistung erzielen als bei einer Bildlaufansicht Großartig, 84 00:07:10,110 --> 00:07:14,970 wenn Sie wissen, dass Sie nur eine begrenzte Anzahl von Elementen haben, die wahrscheinlich über Ihre Bildschirmgrenzen hinausgehen, 85 00:07:14,970 --> 00:07:18,210 aber nicht zu viele redundante Elemente außerhalb des Bildschirms gerendert werden.