1
00:00:02,510 --> 00:00:04,590
Jadi sekarang kita dapat berkomunikasi kembali.

2
00:00:05,470 --> 00:00:10,240
Dan kami benar-benar memperbarui array tujuan kursus kami di komponen aplikasi.

3
00:00:11,040 --> 00:00:17,170
Tapi yang Anda lihat adalah meskipun array diperbarui dan jelas tujuan baru adalah bagian dari array, output kami

4
00:00:17,740 --> 00:00:19,960
di sini di layar tidak berubah.

5
00:00:20,260 --> 00:00:23,920
Dan itu membawa kita ke konsep inti dari keadaan bereaksi.

6
00:00:25,170 --> 00:00:34,530
Bereaksi tidak membuat debit adalah kode X dan oleh karena itu UI nyata setiap saat setiap peristiwa dipicu di mana

7
00:00:34,560 --> 00:00:36,060
saja di aplikasi.

8
00:00:36,270 --> 00:00:41,400
Jadi hanya karena saya mengklik tombol ini di sini tidak berarti reaksi akan membuat seluruh layar

9
00:00:41,400 --> 00:00:43,890
hanya untuk memastikan tidak ada perubahan data.

10
00:00:44,130 --> 00:00:46,080
Ini bukan cara kerjanya.

11
00:00:46,560 --> 00:00:48,270
Sebaliknya, pada akhirnya, Anda harus memberi tahu.

12
00:00:48,330 --> 00:00:49,610
Bereaksi kapan seharusnya.

13
00:00:49,650 --> 00:00:50,340
Buat ulang.

14
00:00:51,050 --> 00:00:55,150
Dan kemudian Anda melakukannya dengan menggunakan konsep yang disebut wacana negara.

15
00:00:55,230 --> 00:00:55,640
Tujuannya adalah.

16
00:00:55,760 --> 00:00:57,610
Berikut ini adalah array JavaScript biasa.

17
00:00:58,230 --> 00:01:01,640
Dengan kata lain, bereaksi sepenuhnya mengabaikannya.

18
00:01:02,280 --> 00:01:06,840
Kita harus mengatakan bahwa ia tidak boleh mengabaikannya dan mati saja.

19
00:01:06,900 --> 00:01:11,660
Setiap kali kita mengubah array tidak, itu harus memperbarui d ui.

20
00:01:11,690 --> 00:01:15,360
J adalah kode X dari komponen tempat kita mengubahnya.

21
00:01:15,450 --> 00:01:17,490
Jadi dalam hal ini komponen aplikasi.

22
00:01:18,420 --> 00:01:22,440
Sekarang untuk melakukan itu kita mengimpor satu hal lagi dari paket REAC.

23
00:01:22,470 --> 00:01:29,490
Dan itu menggunakan status fungsi yang dibangun ke dalam perpustakaan reaksi, yang disebut kait reaksi.

24
00:01:29,610 --> 00:01:32,400
Dan Anda belajar lebih banyak tentang kait di reaksi saya untuk panduan lengkap.

25
00:01:32,430 --> 00:01:32,730
Tentu saja.

26
00:01:32,730 --> 00:01:33,180
Tentu saja.

27
00:01:33,870 --> 00:01:38,340
Fungsi yang tidak dapat kita jalankan berakhir pada semua komponen fungsional.

28
00:01:38,580 --> 00:01:42,770
Dan hanya komponen fungsional daripada komponen berbasis Kelas.

29
00:01:42,810 --> 00:01:47,880
Anda juga memiliki mekanisme manajemen negara, bukan fokus kursus ini di sini, tetapi Anda juga bisa melakukannya di

30
00:01:47,880 --> 00:01:48,240
sana.

31
00:01:48,660 --> 00:01:53,700
Tetapi dalam komponen fungsional, Anda menggunakan fungsi kait ini, sebagaimana mereka dipanggil.

32
00:01:53,970 --> 00:01:54,960
Semua fungsi ini.

33
00:01:55,020 --> 00:01:59,280
Dimulai dengan penggunaan di awal untuk mengelola negara.

34
00:01:59,790 --> 00:02:06,390
Jadi untuk mengelola data yang ketika diubah, harus mengarah ke UI komponen di mana Anda mengatur

35
00:02:06,390 --> 00:02:07,830
untuk membuat ulang.

36
00:02:08,610 --> 00:02:09,810
Jadi di sini komponen aplikasi.

37
00:02:10,200 --> 00:02:14,280
Saya tidak ingin memanggil status penggunaan dan menggunakan status.

38
00:02:14,790 --> 00:02:16,410
Saya melewatkan array ini di sini.

39
00:02:16,800 --> 00:02:18,960
Ini adalah kondisi awal saya.

40
00:02:18,990 --> 00:02:21,690
Maka saya dapat menyingkirkan konsep itu untuk saat ini.

41
00:02:22,260 --> 00:02:26,970
Ini memberi tahu reaksi bahwa komponen ini memiliki beberapa keadaan dan bahwa ini adalah keadaan awal saya.

42
00:02:27,180 --> 00:02:32,100
Ngomong-ngomong, Anda juga dapat memiliki beberapa keping status yang berbeda dan semuanya ditonton secara independen.

43
00:02:32,370 --> 00:02:35,790
Tetapi di sini saya hanya memiliki satu keadaan utama dan itu adalah serangkaian tujuan saya.

44
00:02:36,330 --> 00:02:40,290
Dan saya katakan bereaksi bahwa saya memiliki keadaan ini dan ini adalah keadaan awal saya.

45
00:02:41,220 --> 00:02:46,620
Sekarang, tentu saja, saya ingin mendapatkan akses ke penyimpanan keadaan awal dan beberapa konstanta sehingga saya dapat

46
00:02:46,620 --> 00:02:50,280
menggunakannya di seluruh komponen, karena Core Scholes sekarang hilang di mana-mana.

47
00:02:50,940 --> 00:02:52,980
Jadi Anda menyatakan semua mengembalikan sesuatu.

48
00:02:53,430 --> 00:02:56,490
Ini mengembalikan array tepat dua elemen.

49
00:02:56,910 --> 00:03:01,110
Elemen pertama selalu adalah snapshot keadaan terbaru kami.

50
00:03:01,500 --> 00:03:05,760
Baik keadaan awal kami atau setelah kami mengubahnya, keadaan diperbarui.

51
00:03:06,450 --> 00:03:12,630
Dan elemen kedua array yang dikembalikan oleh status penggunaan adalah fungsi yang memungkinkan kita untuk memperbarui keadaan

52
00:03:12,630 --> 00:03:13,080
itu.

53
00:03:13,500 --> 00:03:18,030
Ganti dengan nilai baru dan katakan bereaksi bahwa itu harus di render.

54
00:03:18,930 --> 00:03:26,010
Jadi di sini ia akan menggunakan susunan array D dengan menggunakan tanda kurung siku di sisi kiri waktu saya yang sama di sini

55
00:03:26,730 --> 00:03:28,620
untuk mengekstraksi dua elemen ini.

56
00:03:28,680 --> 00:03:31,270
Saya memiliki larik inde yang dikembalikan dengan status penggunaan.

57
00:03:31,380 --> 00:03:33,810
Dan selalu ada tepat dua elemen.

58
00:03:34,080 --> 00:03:37,200
Jadi itu tidak tergantung pada jenis data tatta negara yang Anda lewati di sini.

59
00:03:37,440 --> 00:03:40,140
Status penggunaan memberi Anda array dengan tepat dua elemen.

60
00:03:40,470 --> 00:03:42,740
Elemen pertama, kondisi Anda saat ini.

61
00:03:42,840 --> 00:03:45,230
Jadi dalam kasus saya, array saya di sini.

62
00:03:45,870 --> 00:03:48,120
Elemen kedua dari fungsi untuk memperbarui keadaan.

63
00:03:48,240 --> 00:03:50,460
Karena itu, biasanya kami dinamai set.

64
00:03:51,150 --> 00:03:52,770
Dan kemudian nama pilihan Chote Anda.

65
00:03:52,860 --> 00:03:54,330
Tetapkan tujuan kursus dalam kasus saya.

66
00:03:54,900 --> 00:03:57,600
Jadi sekarang saya memiliki dua konstanta yang dibuat dengan bantuan U. S.

67
00:03:57,720 --> 00:04:00,600
Negara konstanta pertama memegang snapshot negara saya.

68
00:04:00,840 --> 00:04:05,880
Kedua, konstanta sebenarnya memiliki fungsi yang dapat kita panggil untuk memperbarui snapshot keadaan itu.

69
00:04:06,510 --> 00:04:09,360
Dan kami akan memanggil fungsi itu di sini dan menambahkan tujuan baru.

70
00:04:09,360 --> 00:04:13,410
Handler dapat memanggil tujuan yang telah ditentukan di sini dan sekarang.

71
00:04:13,410 --> 00:04:16,740
Saya ingin memperbarui tujuan kursus saya dengan menambahkan tujuan baru.

72
00:04:17,400 --> 00:04:24,210
Sekarang, bentuk sederhana dari melakukan itu adalah dengan hanya menggunakan tujuan kursus lama saya dan memanggil concat di sini,

73
00:04:24,210 --> 00:04:31,350
bukan mendorong, karena push memodifikasi item yang ada sebagai gantinya menetapkan tujuan kursus sekali array baru yang akan menggantikan array

74
00:04:31,350 --> 00:04:37,110
lama dan concat juga akan menambahkan item ke array, tetapi akan mengembalikan array baru ke mana

75
00:04:37,140 --> 00:04:38,520
item ini ditambahkan.

76
00:04:38,850 --> 00:04:41,870
Jadi itu memberi kita array baru, tidak menyentuh yang lama.

77
00:04:42,190 --> 00:04:46,080
Dan kami tidak lulus array baru untuk menetapkan tujuan kursus dan bereaksi.

78
00:04:46,080 --> 00:04:52,200
Kemudian akan menggunakan array baru untuk di bawah tenda, menggantikan sinar yang lebih lama dalam keadaan

79
00:04:52,200 --> 00:04:59,760
yang dikelola secara internal dan akan membuat ulang komponen ini setelah melakukannya, dan karenanya memperbarui tujuan wacana yang konstan dengan

80
00:04:59,760 --> 00:05:00,660
array baru.

81
00:05:00,900 --> 00:05:06,210
Dalam siklus render berikutnya, yang kemudian berarti bereaksi akan menjalankan fungsi ini di sini, dan karena itu

82
00:05:06,240 --> 00:05:10,470
ketika melakukannya, itu akan mencerminkan bahwa data baru di Arjay adalah kode X.

83
00:05:11,430 --> 00:05:13,560
Jadi di sini saya ingin menyatukan tujuan baru saya.

84
00:05:13,990 --> 00:05:15,360
Dan jika sekarang kita aman.

85
00:05:16,850 --> 00:05:25,300
Dan saya klik tambahkan tujuan, Anda melihat tujuan baru ditambahkan ke daftar karena sekarang bereaksi rendahkan layar ini atau

86
00:05:25,360 --> 00:05:27,610
bagian-bagian yang perlu dirender ulang.

87
00:05:28,120 --> 00:05:35,500
Setiap kali kami memperbarui status kami sekarang, seberapa tepatnya reaksi yang diulang jadi bukan fokus dari kursus ini.

88
00:05:35,530 --> 00:05:39,850
Anda dapat mempelajarinya dan sumber daya khusus seperti dokumen resmi atau panduan lengkap saya.

89
00:05:40,450 --> 00:05:45,040
Untuk saat ini cukup untuk dicatat yang bereaksi secara ajaib dan efisien.

90
00:05:45,300 --> 00:05:49,840
Apakah dirender halaman atau bagian dari halaman yang perlu dirender ulang?

91
00:05:50,020 --> 00:05:52,150
Berdasarkan perubahan status yang kami terapkan.