1
00:00:02,360 --> 00:00:08,270
Sekarang saya baru saja menunjukkan kepada Anda tampilan gulir dan sudah waktunya untuk melepaskan dan untuk menyingkirkan

2
00:00:08,330 --> 00:00:11,000
tampilan gulir, mengapa? Tampilan gulir sangat

3
00:00:11,000 --> 00:00:13,600
bagus jika Anda memiliki area yang dapat digulir di

4
00:00:13,790 --> 00:00:19,490
layar Anda, tetapi itu tidak terlalu bagus jika Anda memiliki daftar di mana Anda tidak tahu berapa lama

5
00:00:19,490 --> 00:00:21,310
itu atau yang mungkin sangat panjang.

6
00:00:21,320 --> 00:00:27,440
Sekarang jika Anda tahu Anda memiliki beberapa konten, mungkin daftar data tetapi Anda tahu itu hanya 20

7
00:00:27,440 --> 00:00:33,740
item, jadi mungkin akan melebihi batas layar saya tetapi tidak akan pernah lebih dari 20 atau 15 item,

8
00:00:33,740 --> 00:00:35,500
maka Anda dapat menggunakan

9
00:00:35,750 --> 00:00:42,500
tampilan gulir tetapi jika Anda memiliki daftar yang sangat panjang, maka tampilan gulir bisa sangat tidak efisien karena yang

10
00:00:42,500 --> 00:00:47,510
dilakukannya adalah membuat semua elemen di muka, bahkan yang tidak ada di layar.

11
00:00:47,510 --> 00:00:53,220
Itu berarti bahwa bahkan tujuan di bawah sana yang saat ini tidak terlihat sepenuhnya dirender dan ketika Anda menggulir

12
00:00:53,300 --> 00:00:58,520
daftar yang sangat panjang dengan banyak elemen atau jika Anda melakukan hal lain di layar, itu

13
00:00:58,910 --> 00:01:00,620
benar-benar dapat memperlambat aplikasi Anda.

14
00:01:00,650 --> 00:01:05,870
Jika Anda memiliki daftar dengan ratusan atau ribuan elemen dan semuanya selalu ditampilkan

15
00:01:05,870 --> 00:01:09,500
meskipun Anda tidak melihatnya, itu dapat memperlambat aplikasi Anda.

16
00:01:09,500 --> 00:01:16,130
Jadi untuk mempercepat itu, ada komponen yang dibangun ke dalam React Native yang menangani daftar atau daftar yang tak

17
00:01:16,130 --> 00:01:20,460
terbatas yang berpotensi sangat lama dengan cara yang lebih efisien dan itu

18
00:01:20,510 --> 00:01:28,580
adalah komponen FlatList yang juga Anda impor dari React Native. FlatList menggantikan tampilan gulir sehingga bisa dikatakan, jadi di

19
00:01:28,580 --> 00:01:35,960
sini kita cukup menggunakan FlatList yang merupakan elemen penutup sendiri dan FlatList memiliki dua properti penting -

20
00:01:36,050 --> 00:01:42,770
properti pertama adalah properti data tempat Anda menunjuk pada data input Anda dan ini harus

21
00:01:42,770 --> 00:01:44,570
menunjuk pada sebuah array.

22
00:01:44,600 --> 00:01:49,610
Jadi di sini, saya menunjuk tujuan saja karena itulah data yang ingin saya hasilkan.

23
00:01:49,610 --> 00:01:57,170
Properti penting kedua adalah render item, yang mengambil fungsi yang dipanggil untuk setiap item dalam

24
00:01:57,170 --> 00:02:00,840
data Anda untuk merender item daftar.

25
00:02:00,850 --> 00:02:04,060
Ini adalah fungsi yang akan mendapatkan beberapa data tentang item

26
00:02:04,060 --> 00:02:08,410
itu, maka saya akan menyebutkan data item argumen dan kemudian harus mengembalikan komponen, jadi

27
00:02:08,410 --> 00:02:11,470
di sini saya akan mengembalikan tampilan yang sama yang

28
00:02:11,470 --> 00:02:16,270
saya miliki sebelumnya, cukup singkirkan manual pemetaan logika, jadi saya akan tetap mengembalikan tampilan ini.

29
00:02:16,270 --> 00:02:21,670
Sekarang Anda tidak perlu menetapkan kunci di sini lagi, tetapi saya akan kembali ke bagaimana ini dimasukkan dalam hitungan detik.

30
00:02:21,670 --> 00:02:27,060
Jadi sekarang di sini kita mendapatkan data barang dan karena itu kita tidak memiliki tujuan di sini lagi.

31
00:02:27,190 --> 00:02:35,820
Data item adalah objek yang lebih kompleks tetapi di sana yang akan Anda miliki adalah properti item, selain item Anda juga memiliki indeks,

32
00:02:35,820 --> 00:02:36,840
jadi nomor,

33
00:02:36,840 --> 00:02:44,180
posisi item dalam array mulai dari 0 dan pemisah yang akan memungkinkan Anda pada dasarnya membuat pemisah secara dinamis

34
00:02:44,180 --> 00:02:50,270
di antara item daftar, bukan sesuatu yang akan kami lakukan di sini tetapi item akan menjadi

35
00:02:50,270 --> 00:02:52,340
data Anda, jadi satu elemen

36
00:02:52,340 --> 00:02:57,080
dari data input Anda dan karena itu inilah salah satu tujuan kami.

37
00:02:57,230 --> 00:03:02,920
dan jika kita melakukan itu dan kita simpan ini, sekarang mari kita belajar Bereaksi Asli, mungkin di

38
00:03:03,180 --> 00:03:08,430
sini di iPhone untuk mencampuradukkan dan kita dapat menambahkan hal-hal di sini dan jika saya

39
00:03:08,670 --> 00:03:14,700
menambahkan banyak dan saya kemudian menutup keyboard, saya dapat menggulir tetapi Anda ' Saya akan melihat bahwa ada peringatan.

40
00:03:15,630 --> 00:03:21,120
Kami memperluas ini, kami melihat virtualisasi daftar kunci yang hilang untuk item, sehingga

41
00:03:21,120 --> 00:03:24,450
merupakan peringatan lain yang terkait dengan kunci.

42
00:03:24,450 --> 00:03:31,680
Alasan untuk itu adalah bahwa FlatList secara otomatis menambahkan kunci ke item Anda tetapi hanya

43
00:03:31,680 --> 00:03:40,770
jika data Anda, data input Anda memiliki bentuk tertentu dan bentuk kami saat ini di mana kami hanya memiliki

44
00:03:40,900 --> 00:03:45,130
serangkaian string tidak didukung. Bentuk yang diharapkan

45
00:03:45,150 --> 00:03:53,910
adalah bahwa Anda tidak memiliki tujuan yang hanya berupa string tetapi sebaliknya bahwa daftar Anda adalah daftar objek

46
00:03:54,390 --> 00:04:02,640
di mana Anda harus memiliki properti kunci di objek itu dan di sini kita akan benar-benar

47
00:04:02,640 --> 00:04:09,560
membuat kunci acak sekarang dengan Matematika . acak dan kemudian saya mengonversikannya menjadi string karena itu harus berupa string dan tentu

48
00:04:09,560 --> 00:04:10,420
saja, itu

49
00:04:10,430 --> 00:04:14,810
tidak sepenuhnya unik, Anda mungkin memiliki nomor acak yang sama dua kali tetapi cukup baik untuk demo ini

50
00:04:14,810 --> 00:04:17,750
di sini dan sekarang Anda tidak dapat memiliki data lain di sini,

51
00:04:17,750 --> 00:04:19,610
di objek itu, kuncinya adalah satu-satunya properti

52
00:04:19,610 --> 00:04:21,480
yang harus dimiliki, jadi di sini saya

53
00:04:21,500 --> 00:04:24,610
akan memiliki properti nilai tetapi Anda bisa menamai val ini atau teks atau

54
00:04:24,640 --> 00:04:25,720
apa pun yang Anda

55
00:04:26,360 --> 00:04:28,190
inginkan, saya akan pergi dengan nilai dan

56
00:04:28,190 --> 00:04:29,580
ini sekarang tujuan saya yang dimasukkan.

57
00:04:29,590 --> 00:04:36,070
Jadi sekarang array tujuan kursus kami di sini adalah array objek di mana setiap objek memiliki properti

58
00:04:36,070 --> 00:04:37,720
kunci dan properti nilai

59
00:04:37,720 --> 00:04:44,320
dan sekarang jika kami memasukkan array tujuan kursus ke FlatList, FlatList senang karena mengharapkan sumber data di

60
00:04:44,320 --> 00:04:50,800
mana Anda memiliki array objek, di mana setiap objek memiliki properti utama dan kemudian apa pun yang

61
00:04:50,800 --> 00:04:52,920
Anda inginkan. Sekarang untuk menampilkan

62
00:04:52,930 --> 00:04:59,020
data kami, itu tidak lagi cukup untuk mengakses itemData. item karena item sekarang menjadi objek dan

63
00:04:59,020 --> 00:05:05,590
bukan hanya string lagi tetapi item akan memiliki kunci dan properti nilai sekarang karena itulah yang kami siapkan di

64
00:05:05,590 --> 00:05:12,490
sana dan saya bisa mengakses properti nilai untuk menampilkan teks. Dan sekarang jika kita menyimpan ini dan ini membangun

65
00:05:12,530 --> 00:05:21,350
kembali dan karena itu sekarang jika kita coba ini lagi dengan Learn React Native, tutup keyboard, Anda lihat kami tidak lagi mendapatkan peringatan

66
00:05:21,350 --> 00:05:27,380
dan kami masih dapat menggulir ini tentu saja, kami tidak mendapatkan kesalahan di sini juga karena

67
00:05:27,380 --> 00:05:32,990
sekarang, kami memiliki properti utama di sini. Sekarang jika Anda memiliki data di mana Anda

68
00:05:32,990 --> 00:05:41,000
tidak memiliki properti utama dan Anda tidak ingin mengubahnya, katakanlah Anda memiliki ID sebagai gantinya yang akan menyebabkan peringatan seperti yang Anda

69
00:05:43,570 --> 00:05:45,160
lihat jika saya

70
00:05:45,760 --> 00:05:52,290
menguji ini, kami mendapatkan peringatan di sini , dalam hal ini Anda juga dapat menambahkan properti lain

71
00:05:52,290 --> 00:05:59,440
ke FlatList selain data dan render item, Anda dapat menambahkan properti extractor kunci yang mengambil fungsi yang memberitahu FlatList

72
00:05:59,440 --> 00:06:06,190
cara mengekstrak kunci Anda dan secara default, logikanya adalah saya akan melihat-lihat pada item dan mencari properti kunci

73
00:06:06,190 --> 00:06:12,220
tetapi sekarang dengan extractor kunci, Anda dapat mengubahnya. Key extractor mengambil fungsi yang membutuhkan dua argumen - item yang dilihatnya dan indeks item itu

74
00:06:12,220 --> 00:06:17,800
dan sekarang Anda perlu mengembalikan kunci dan secara default, itu akan mencari item. kunci, jadi itulah logika

75
00:06:17,800 --> 00:06:21,740
default yang tidak perlu Anda tambahkan.

76
00:06:21,940 --> 00:06:29,950
Sekarang di sini, saya mengubah kunci atau pengidentifikasi unik untuk berada di ID prop dan oleh karena itu, saya akan mengubahnya di sana

77
00:06:29,950 --> 00:06:35,920
di extractor kunci untuk mendapatkan ID sebagai kunci dan sekarang dengan itu, Anda juga menyingkirkan peringatan karena

78
00:06:35,920 --> 00:06:41,770
Anda memberi tahu React Native's FlatList cara mendapatkan kunci unik untuk setiap item dalam daftar

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

80
00:06:42,670 --> 00:06:53,850
Jadi sekarang di sini, jika Anda lagi belajar Bereaksi Asli di sini dan kami menambahkan ini, Anda akan melihat ini berfungsi, kami dapat menggulir ini

81
00:06:54,030 --> 00:07:00,150
dan kami juga tidak mendapat peringatan. Jadi itu FlatList dan Anda harus menggunakan FlatList untuk daftar yang

82
00:07:00,360 --> 00:07:05,370
sangat panjang, untuk daftar di mana Anda tidak tahu berapa lama mereka tetapi di mana mereka berpotensi sangat panjang

83
00:07:05,370 --> 00:07:10,110
karena itu memberi Anda kinerja yang lebih baik daripada tampilan gulir yang di sisi lain adalah hebat jika

84
00:07:10,110 --> 00:07:14,970
Anda tahu Anda hanya memiliki jumlah terbatas item yang mungkin akan melampaui batas layar Anda tetapi di mana Anda

85
00:07:14,970 --> 00:07:18,210
tidak akan memiliki terlalu banyak item berlebihan yang diberikan di luar layar.