1
00:00:02,360 --> 00:00:08,270
Maintenant, je viens de vous montrer la vue de défilement et il est déjà temps de lâcher prise et de se débarrasser de

2
00:00:08,330 --> 00:00:11,000
la vue de défilement, pourquoi? La vue de défilement

3
00:00:11,000 --> 00:00:13,600
est excellente si vous avez une zone de défilement sur

4
00:00:13,790 --> 00:00:19,490
votre écran, mais ce n'est pas si bien si vous avez une liste où vous ne savez pas combien de temps elle

5
00:00:19,490 --> 00:00:21,310
sera ou qui pourrait être très longue.

6
00:00:21,320 --> 00:00:27,440
Maintenant, si vous savez que vous avez du contenu, peut-être une liste de données, mais vous savez que ce ne

7
00:00:27,440 --> 00:00:33,740
sont que 20 éléments, donc cela dépassera probablement les limites de mon écran mais ce ne sera jamais plus de 20

8
00:00:33,740 --> 00:00:35,500
ou 15 éléments, alors vous

9
00:00:35,750 --> 00:00:42,500
pouvez utiliser une vue de défilement mais si vous avez des listes très longues, une vue de défilement peut être très inefficace

10
00:00:42,500 --> 00:00:47,510
car elle rend tous les éléments à l'avance, même ceux qui ne sont pas à l'écran.

11
00:00:47,510 --> 00:00:53,220
Cela signifie que même les objectifs là-bas qui ne sont actuellement pas visibles sont entièrement rendus et lorsque vous

12
00:00:53,300 --> 00:00:58,520
faites défiler une liste très longue avec beaucoup d'éléments ou si vous faites autre chose à l'écran, cela

13
00:00:58,910 --> 00:01:00,620
peut vraiment ralentir votre application.

14
00:01:00,650 --> 00:01:05,870
Si vous avez une liste avec des centaines ou des milliers d'éléments et que tous sont toujours affichés même

15
00:01:05,870 --> 00:01:09,500
si vous ne les voyez pas, cela peut vraiment ralentir votre application.

16
00:01:09,500 --> 00:01:16,130
Donc, pour accélérer cela, il existe un composant intégré à React Native qui gère de telles listes infinies ou

17
00:01:16,130 --> 00:01:20,460
des listes potentiellement très longues de manière plus efficace et c'est le

18
00:01:20,510 --> 00:01:28,580
composant FlatList que vous importez également à partir de React Native. FlatList remplace la vue de défilement pour ainsi dire, donc

19
00:01:28,580 --> 00:01:35,960
ici nous pouvons simplement utiliser FlatList qui est un élément à fermeture automatique et FlatList a deux propriétés importantes

20
00:01:36,050 --> 00:01:42,770
- la première propriété est la propriété data où vous pointez sur vos données d'entrée et cela devrait

21
00:01:42,770 --> 00:01:44,570
pointer sur un tableau.

22
00:01:44,600 --> 00:01:49,610
Alors ici, je pointe les objectifs du cours parce que ce sont les données que je veux sortir.

23
00:01:49,610 --> 00:01:57,170
La deuxième propriété importante est l'élément de rendu, qui prend une fonction qui est appelée pour chaque élément de

24
00:01:57,170 --> 00:02:00,840
vos données pour rendre un élément de liste.

25
00:02:00,850 --> 00:02:04,060
Ceci est une fonction qui obtiendra des données sur cet élément,

26
00:02:04,060 --> 00:02:08,410
donc je vais nommer les données de l'élément d'argument et ensuite elle doit renvoyer un composant,

27
00:02:08,410 --> 00:02:11,470
alors ici je vais retourner la même vue que j'avais

28
00:02:11,470 --> 00:02:16,270
avant, juste me débarrasser du manuel la logique de mappage, donc je vais toujours retourner cette vue.

29
00:02:16,270 --> 00:02:21,670
Maintenant, vous n'avez plus besoin de définir une clé ici, mais je reviendrai sur la façon dont cela est saisi dans une seconde.

30
00:02:21,670 --> 00:02:27,060
Alors maintenant, ici, nous obtenons les données de l'article et donc nous n'avons plus d'objectif ici.

31
00:02:27,190 --> 00:02:35,820
Les données d'un élément sont un objet plus complexe, mais vous y trouverez une propriété d'élément.En plus de l'élément, vous avez également l'index, donc le

32
00:02:35,820 --> 00:02:36,840
nombre, la

33
00:02:36,840 --> 00:02:44,180
position de cet élément dans le tableau à partir de 0 et des séparateurs qui vous permettraient pour rendre les séparateurs

34
00:02:44,180 --> 00:02:50,270
de manière dynamique entre les éléments de la liste, ce n'est pas quelque chose que nous ferons ici,

35
00:02:50,270 --> 00:02:52,340
mais l'élément sera vos données, donc

36
00:02:52,340 --> 00:02:57,080
un élément de vos données d'entrée et c'est donc l'un de nos objectifs.

37
00:02:57,230 --> 00:03:02,920
et si nous le faisons et que nous le sauvegardons, apprenons maintenant React Native, peut-être ici sur l'iPhone pour

38
00:03:03,180 --> 00:03:08,430
mélanger les choses et nous pouvons ajouter des choses ici et si j'en ajoute beaucoup et

39
00:03:08,670 --> 00:03:14,700
que je ferme ensuite le clavier, je peux faire défiler mais vous '' Je verrai qu'il y a un avertissement.

40
00:03:15,630 --> 00:03:21,120
Nous développons cela, nous voyons virtualiser la liste des clés manquantes pour les articles,

41
00:03:21,120 --> 00:03:24,450
c'est donc un autre avertissement lié aux clés.

42
00:03:24,450 --> 00:03:31,680
La raison en est que FlatList ajoute automatiquement des clés à vos éléments, mais uniquement si vos

43
00:03:31,680 --> 00:03:40,770
données, vos données d'entrée ont une certaine forme et notre forme actuelle où nous avons simplement un tableau de chaînes n'est

44
00:03:40,900 --> 00:03:45,130
pas prise en charge. La forme à laquelle

45
00:03:45,150 --> 00:03:53,910
il s'attendrait est que vous n'avez pas d'objectifs qui ne sont que des chaînes mais que votre liste est une

46
00:03:54,390 --> 00:04:02,640
liste d'objets où vous devez avoir une propriété de clé dans cet objet et ici nous allons réellement

47
00:04:02,640 --> 00:04:09,560
créer une clé aléatoire maintenant avec Math . au hasard et ensuite je le convertis en une chaîne car ce devrait être

48
00:04:09,560 --> 00:04:10,420
une chaîne

49
00:04:10,430 --> 00:04:14,810
et bien sûr, ce n'est pas parfaitement unique, vous pourriez avoir le même nombre aléatoire deux fois mais

50
00:04:14,810 --> 00:04:17,750
c'est assez bon pour cette démo ici et maintenant vous ne pouvez

51
00:04:17,750 --> 00:04:19,610
plus avoir d'autres données ici, dans cet

52
00:04:19,610 --> 00:04:21,480
objet, la clé est la seule propriété incontournable,

53
00:04:21,500 --> 00:04:24,610
donc ici j'aurai une propriété value mais vous auriez pu nommer ce val

54
00:04:24,640 --> 00:04:25,720
ou ce texte ou

55
00:04:26,360 --> 00:04:28,190
ce que vous voulez, j'irai avec value

56
00:04:28,190 --> 00:04:29,580
et c'est maintenant mon objectif entré.

57
00:04:29,590 --> 00:04:36,070
Alors maintenant, notre tableau d'objectifs de cours ici est un tableau d'objets où chaque objet a une propriété clé et

58
00:04:36,070 --> 00:04:37,720
une propriété de valeur et

59
00:04:37,720 --> 00:04:44,320
maintenant si nous alimentons ce tableau d'objectifs de cours dans FlatList, FlatList est content car il attend une source de

60
00:04:44,320 --> 00:04:50,800
données où vous avez un tableau de objets, où chaque objet a une propriété clé, puis tout ce que

61
00:04:50,800 --> 00:04:52,920
vous voulez. Maintenant, pour sortir

62
00:04:52,930 --> 00:04:59,020
nos données, il ne suffit plus d'accéder à itemData. élément parce que l'élément est maintenant un objet et non

63
00:04:59,020 --> 00:05:05,590
plus seulement une chaîne, mais l'élément aura une clé et une propriété value maintenant parce que c'est ce que nous configurons là-bas et

64
00:05:05,590 --> 00:05:12,490
je peux simplement accéder à la propriété value pour sortir le texte. Et maintenant, si nous enregistrons ceci et cela reconstruit

65
00:05:12,530 --> 00:05:21,350
et donc maintenant si nous essayons à nouveau avec Learn React Native, fermez le clavier, vous voyez que nous n'obtenons plus d'avertissement et nous

66
00:05:21,350 --> 00:05:27,380
pouvons toujours faire défiler cela bien sûr, nous n'obtenons aucune erreur ici non plus parce que

67
00:05:27,380 --> 00:05:32,990
maintenant, nous avons cette propriété clé ici. Maintenant, si vous avez des données où vous n'avez

68
00:05:32,990 --> 00:05:41,000
pas de propriété de clé et que vous ne voulez pas les transformer, disons que vous aviez à la place un ID qui provoquerait un avertissement

69
00:05:43,570 --> 00:05:45,160
comme vous pouvez le

70
00:05:45,760 --> 00:05:52,290
voir si je teste cela, nous obtenons l'avertissement ici , dans ce cas, vous pouvez également ajouter une autre propriété à

71
00:05:52,290 --> 00:05:59,440
FlatList en plus des données et de l'élément de rendu, vous pouvez ajouter la propriété d'extracteur de clé qui prend une fonction qui indique

72
00:05:59,440 --> 00:06:06,190
à FlatList comment extraire votre clé et par défaut, la logique est que j'examinerai à l'élément et recherchez une propriété de clé,

73
00:06:06,190 --> 00:06:12,220
mais maintenant avec l'extracteur de clé, vous pouvez changer cela. L'extracteur de clé prend une fonction qui prend deux arguments - l'élément qu'il regarde et l'index de

74
00:06:12,220 --> 00:06:17,800
cet élément et maintenant vous devez retourner une clé et par défaut, il chercherait l'élément. , c'est donc la logique

75
00:06:17,800 --> 00:06:21,740
par défaut que vous n'avez pas besoin d'ajouter.

76
00:06:21,940 --> 00:06:29,950
Maintenant, ici, je change la clé ou l'identifiant unique pour être sur un accessoire d'ID et donc, je vais changer cela là-bas dans l'extracteur de

77
00:06:29,950 --> 00:06:35,920
clé pour obtenir l'ID sous forme de clé et maintenant avec cela, vous vous débarrassez également de l'avertissement

78
00:06:35,920 --> 00:06:41,770
parce que vous informez React Native's FlatList comment obtenir une clé unique pour chaque élément de votre

79
00:06:41,770 --> 00:06:42,160
liste.

80
00:06:42,670 --> 00:06:53,850
Alors maintenant ici, si vous apprenez à nouveau React Native ici et que nous ajoutons cela, vous verrez que cela fonctionne, nous pouvons faire défiler cela

81
00:06:54,030 --> 00:07:00,150
et nous n'avons également aucun avertissement. C'est donc FlatList et vous devriez utiliser FlatList pour des listes

82
00:07:00,360 --> 00:07:05,370
très longues, pour des listes où vous ne savez pas combien de temps elles seront mais où elles sont potentiellement

83
00:07:05,370 --> 00:07:10,110
très longues car cela vous donne une meilleure performance qu'une vue de défilement qui d'autre part est génial si

84
00:07:10,110 --> 00:07:14,970
vous savez que vous ne disposez que d'une quantité limitée d'éléments qui dépasseront probablement les limites de votre écran

85
00:07:14,970 --> 00:07:18,210
mais où vous n'aurez pas trop d'éléments redondants rendus en dehors de l'écran.