1 00:00:02,520 --> 00:00:06,230 Sekarang perlu disebutkan bahwa saya juga menyentuh kait untuk semua kursus ini. 2 00:00:06,330 --> 00:00:12,450 Jadi beberapa kait semua menyelam lebih dalam ke Anda dalam modul ini adalah kait yang telah disebutkan untuk semua kursus ini, 3 00:00:12,520 --> 00:00:16,290 tetapi kemudian saya selalu menyebutkan bahwa kita akan menyelam ke dalamnya nanti. 4 00:00:16,290 --> 00:00:17,880 Nah sekarang sudah mati. 5 00:00:17,940 --> 00:00:23,920 Nanti Sekarang kita akan menyelam lebih detail dan mari kita mulai dengan bahan untuk jazz fall. 6 00:00:23,940 --> 00:00:31,140 Di sana kami memiliki beberapa input dan satu hal yang biasanya kami lakukan di sini adalah bahwa kami mengikat 7 00:00:31,140 --> 00:00:39,150 input yang dimasukkan pengguna ke beberapa negara untuk membendung properti negara dan kami memperbarui keadaan itu pada setiap keystroke dan kemudian 8 00:00:39,150 --> 00:00:41,390 mengirim nilai kembali ke input. 9 00:00:41,400 --> 00:00:41,830 Baik. 10 00:00:41,850 --> 00:00:45,990 Itulah Langkah Dua di mana penjilidan yang Anda pelajari dalam kursus ini dan kami melakukan ini beberapa kali 11 00:00:45,990 --> 00:00:47,450 ketika Anda bekerja dengan input. 12 00:00:47,580 --> 00:00:53,700 Saya ingin melakukan hal yang sama di sini karena pada akhirnya semuanya dimulai di aplikasi ini di sini bersama 13 00:00:53,700 --> 00:00:59,550 kami mengumpulkan input pengguna sehingga kami dapat membuat pola bahan tambah ini berfungsi sehingga kami melakukan sesuatu yang 14 00:00:59,540 --> 00:01:01,150 bermanfaat ketika tombol ditekan. 15 00:01:01,160 --> 00:01:08,130 Sekarang jika Anda tidak akan tahu tentang kait atau jika Anda akan bereaksi 16 titik 7 atau lebih awal daripada Anda harus 16 00:01:08,130 --> 00:01:13,040 mengubah ini menjadi komponen berbasis kelas dan menggunakan negara dan mengatur negara di sana. 17 00:01:13,290 --> 00:01:15,450 Sekarang dengan kait reaksi Anda tidak perlu melakukan itu. 18 00:01:15,510 --> 00:01:21,060 Alih-alih, Anda dapat mengimpor sesuatu yang baru dari reaksi dengan tidak hanya 19 00:01:21,060 --> 00:01:28,050 mengimpor ekspor default yang merupakan objek reaksi tetapi dengan mengimpor ekspor bernama dan yang menggunakan status. 20 00:01:28,050 --> 00:01:32,740 Saya menyebutkan bahwa semua kait ini mulai digunakan dan kemudian mereka memiliki berbagai nama. 21 00:01:32,760 --> 00:01:34,430 Jadi di sini untuk menggunakan status. 22 00:01:34,590 --> 00:01:40,300 Dan ini sangat penting, mungkin kait inti yang disediakan oleh reaksi. 23 00:01:40,320 --> 00:01:43,950 Ini memungkinkan kita untuk mengelola komponen keadaan dan fungsional. 24 00:01:43,950 --> 00:01:47,660 Ini bekerja sedikit berbeda dari komponen berbasis negara dalam kelas. 25 00:01:47,760 --> 00:01:49,710 Tapi kita akan melihat perbedaannya dalam sedetik. 26 00:01:50,460 --> 00:01:52,210 Jadi bagaimana kita menggunakannya? 27 00:01:52,250 --> 00:01:56,910 Yah kita masuk ke komponen fungsional kami dan itu penting Anda harus menggunakannya dalam tubuh 28 00:01:56,910 --> 00:01:57,870 komponen fungsional Anda. 29 00:01:58,200 --> 00:02:02,300 Jadi katakanlah di sini kita menyebutnya negara panggilan kita gunakan. 30 00:02:02,300 --> 00:02:09,300 Sekarang itu saja tidak banyak membantu meskipun menggunakan status dapat diinisialisasi dengan keadaan default dan keadaan itu bisa berupa apa saja 31 00:02:09,300 --> 00:02:15,810 bisa menjadi objek dapat berupa array dapat berupa angka, dapat berupa string, boolean dapat berupa nilai apa pun yang 32 00:02:15,900 --> 00:02:20,340 tidak dilakukan. ' t harus menjadi objek, bisa berupa nilai apa pun. 33 00:02:20,340 --> 00:02:27,660 Jadi di sini kita bisa membuat status baru yang harus mengatur input untuk judul dan jumlah. 34 00:02:27,660 --> 00:02:31,300 Jadi mari kita buat objek di sini lagi tidak harus menjadi objek. 35 00:02:31,380 --> 00:02:37,920 Saya memilih untuk menggunakan satu di sini karena saya memiliki dua nilai yang ingin saya kelola dan itu akan menjadi judul dan 36 00:02:37,920 --> 00:02:42,990 pada awalnya ini adalah string dan jumlah kosong dan mari kita atur jumlah juga ke string kosong. 37 00:02:42,990 --> 00:02:47,640 Sekarang Anda bisa berpendapat bahwa itu harus menyimpan nomor dan karenanya Anda ingin mengaturnya ke nol atau 38 00:02:47,640 --> 00:02:49,110 sesuatu seperti itu pada awalnya. 39 00:02:49,110 --> 00:02:55,680 Tetapi sebenarnya mengelola ini akan lebih mudah jika kita mengatakan ke string karena elemen input nilai-nilai elemen 40 00:02:55,680 --> 00:03:01,290 input selalu string bahkan jika nomor tipe itu sendiri akan selalu mendapatkan string. 41 00:03:01,320 --> 00:03:06,960 Jika kita ingin bekerja dengan angka di aplikasi kita maka kita harus mengonversi nilai itu setiap kali 42 00:03:06,960 --> 00:03:07,810 kita menggunakannya. 43 00:03:07,860 --> 00:03:13,680 Tetapi ketika kita mengambilnya ketika kita mengelolanya sebagai string banyak efek samping yang aneh di mana kita mungkin 44 00:03:13,680 --> 00:03:16,860 tidak dapat mengedit nilai ini seperti yang kita inginkan. 45 00:03:17,280 --> 00:03:24,870 Jadi kedua nilai di sini adalah string dan sekarang tentu saja pertanyaannya adalah apa yang membuat kita mendapatkan apa 46 00:03:24,870 --> 00:03:26,970 yang disebut negara ini lakukan? 47 00:03:26,970 --> 00:03:33,240 Karena hanya itu saja tentu saja tidak akan mengatur koneksi kita dengan baik keadaan kita sedang kita coba kelola 48 00:03:33,240 --> 00:03:40,650 di sini dan input kita sekarang U. S. Negara sebenarnya kita mengembalikan sesuatu tahun ini 49 00:03:40,690 --> 00:03:47,400 mungkin rumit untuk dibaca tetapi ini pada akhirnya menjelaskan bagaimana fungsi menggunakan fungsi negara didefinisikan dan setelah dingin 50 00:03:47,400 --> 00:03:54,150 di sini kita melihat nilai kembali dan kita melihat bahwa nilai kembali sebenarnya adalah array dan ini adalah array 51 00:03:54,150 --> 00:03:56,190 dengan tepat dua elemen. 52 00:03:56,190 --> 00:04:05,910 Dan itu penting. S. status dibangun di Hook selalu mengembalikan array dengan 53 00:04:05,910 --> 00:04:13,380 tepat dua elemen. Elemen pertama selalu merupakan snapshot keadaan Anda saat ini dan setiap kali keadaan Anda diperbarui, saya akan 54 00:04:13,380 --> 00:04:14,650 kembali dalam sedetik. 55 00:04:14,730 --> 00:04:16,830 Komponen ini akan dibangun kembali. 56 00:04:16,830 --> 00:04:23,850 Jadi fungsi komponen ini dibaca dieksekusi dan menggunakan status tentu saja kemudian untuk semua yang dieksekusi lagi tetapi bereaksi 57 00:04:23,880 --> 00:04:31,140 secara internal, manfaatkan Anda sudah mengonfigurasi status dengan bantuan status penggunaan untuk komponen ini dan tidak akan menginisialisasi ulang 58 00:04:31,260 --> 00:04:37,890 melainkan menggunakan negara mengelola negara ini lepaskan dari komponen Anda sehingga bisa dikatakan sangat independen dari komponen 59 00:04:37,890 --> 00:04:43,500 Anda sehingga keadaan selamat merender kembali komponen ini sehingga keadaan bertahan ketika fungsi komponen ini 60 00:04:43,710 --> 00:04:48,720 dieksekusi lagi dan oleh karena itu gunakan keadaan lakukan nilai pertama yang dikembalikan 61 00:04:48,720 --> 00:04:54,180 di sini adalah keadaan Anda saat ini snapshot dan ini adalah snapshot keadaan saat 62 00:04:54,450 --> 00:04:57,960 ini untuk balas dendam atau siklus komponen ini. 63 00:04:58,200 --> 00:05:03,210 Ini berarti bahwa ketika Anda memperbarui tahap Anda akan mendapatkan status diperbarui di sini sehingga Anda mendapatkan kembali 64 00:05:03,210 --> 00:05:08,250 sebuah array dan menggunakan status dan array data memiliki dua elemen dan elemen pertama selalu snapshot keadaan Anda saat ini. 65 00:05:08,480 --> 00:05:14,220 Bahkan keadaan awal atau jika Anda mengubahnya keadaan diperbarui yang tentu saja mengarahkan kita ke pertanyaan bagaimana 66 00:05:14,490 --> 00:05:15,800 Anda mengubah keadaan. 67 00:05:15,810 --> 00:05:17,400 Bagaimana Anda memperbarui negara. 68 00:05:17,610 --> 00:05:21,100 Dan di situlah elemen kedua dalam kekacauan sangat membantu. 69 00:05:21,120 --> 00:05:25,160 Seperti yang saya sebutkan array ini selalu memiliki tepat dua elemen. 70 00:05:25,290 --> 00:05:27,660 Elemen pertama adalah snapshot keadaan Anda saat ini. 71 00:05:27,660 --> 00:05:32,700 Elemen kedua adalah fungsi yang memungkinkan Anda untuk memperbarui keadaan Anda saat ini. 72 00:05:32,700 --> 00:05:39,270 Jadi tahun ini benda aneh ini mengirimkan benda di sini yaitu fungsi yang 73 00:05:39,270 --> 00:05:47,220 akan selalu menjadi fungsi yang dapat Anda panggil dengan data baru agar negara Anda memperbarui keadaan itu. 74 00:05:47,220 --> 00:05:49,030 Maka dari itu apa yang bisa kita lakukan di sini. 75 00:05:49,200 --> 00:05:54,600 Kita dapat menyimpan array ini dengan tepat dua elemen dalam suatu variabel atau dalam konstanta di sini sebenarnya. 76 00:05:54,600 --> 00:05:57,590 Karena untuk siklus render ini tidak akan berubah. 77 00:05:57,660 --> 00:06:01,480 Oleh karena itu dapat berupa konstanta dan semuanya dinamai status masukan. 78 00:06:01,500 --> 00:06:07,260 Nama ini sepenuhnya terserah Anda, tetapi pada akhirnya di sini kami mengelola semua yang kami butuhkan untuk mengatur keadaan sumur 79 00:06:07,380 --> 00:06:09,470 kami untuk dua input ini di sini. 80 00:06:09,480 --> 00:06:16,930 Karenanya status input nama sekarang ditambahkan, kami menyimpan array kami dengan snapshot status dan fungsi pembaruan status di sini dalam status input, 81 00:06:16,930 --> 00:06:22,410 kami dapat menghubungkannya ke input kami dan di sana saya akan menggunakan pendekatan yang serupa. 82 00:06:22,420 --> 00:06:28,270 Saya menunjukkan kepada Anda sebelumnya dalam kursus dengan cara Q mengikat pada akhirnya di mana kami 83 00:06:28,270 --> 00:06:34,840 mengikat nilai inputnya ke snapshot keadaan saat ini sehingga kami melewati keadaan saat ini kembali ke input sehingga untuk mengatakan 84 00:06:34,840 --> 00:06:40,840 dan saya melakukan ini dengan hanya merujuk pada input status dan kemudian elemen pertama ingat status input adalah 85 00:06:40,840 --> 00:06:46,730 array dengan tepat dua elemen dan elemen pertama pada indeks 0 akan menjadi snapshot keadaan saat ini. 86 00:06:46,840 --> 00:06:52,930 Jadi Ayah akan baik-baik saja apa yang ingin kita masukan kembali ke input sekarang tentu saja keadaan kita adalah objek 87 00:06:52,990 --> 00:06:54,070 meskipun bukan string. 88 00:06:54,100 --> 00:07:01,450 Jadi untuk input judul di sini saya ingin mengakses status input judul nol titik karena status kami adalah objek dengan 89 00:07:01,450 --> 00:07:08,980 judul dan properti jumlah yang akan dikelola, sedangkan input untuk dua input ini dan meneruskan jumlah input di sini sepanjang hari 90 00:07:08,980 --> 00:07:15,190 untuk nilai yang disetel sama dengan input keadaan untuk elemen pertama yang merupakan snapshot keadaan kita saat 91 00:07:15,190 --> 00:07:15,870 ini. 92 00:07:15,940 --> 00:07:23,000 Jumlah sekarang kita memberi makan keadaan saat ini untuk input masing-masing kembali ke elemen input. 93 00:07:23,060 --> 00:07:29,240 Tentu saja Anda juga ingin memperbarui status ketika kami mengetikkan input ini dan untuk itu seperti yang kami 94 00:07:29,240 --> 00:07:32,120 lakukan selalu termasuk dalam komponen berbasis kelas. 95 00:07:32,240 --> 00:07:39,220 Kita dapat mendengarkan pada acara perubahan yang menyala atau setiap keystroke dan di sana kita mendapatkan objek acara ini. 96 00:07:39,230 --> 00:07:45,050 Jadi di sini saya menjalankan fungsi anonim pada akhirnya kami mendapatkan objek acara Steve secara otomatis dan 97 00:07:45,050 --> 00:07:46,860 kami ingin memperbarui keadaan kami. 98 00:07:46,880 --> 00:07:51,100 Dan seperti yang saya sebutkan kita lakukan ini dengan elemen kedua dalam array ini. 99 00:07:51,230 --> 00:07:53,280 Status penggunaan memberi kita kembali. 100 00:07:53,300 --> 00:07:58,850 Jadi di sini kita mengakses elemen db dan indeks 1 yang merupakan elemen kedua dan ini adalah fungsi sehingga 101 00:07:58,850 --> 00:08:02,200 kita dapat menjalankannya sebagai fungsi dengan menambahkan tanda kurung di sini. 102 00:08:02,210 --> 00:08:05,540 Sekarang di sini saya pada input judul jadi saya ingin memperbarui judul. 103 00:08:05,570 --> 00:08:13,850 Jadi yang kita lakukan di sini adalah kita hanya melewatkan objek baru ke keadaan input untuk memperbarui keadaan kita saat ini dengan 104 00:08:13,970 --> 00:08:15,740 objek keadaan baru ini. 105 00:08:15,740 --> 00:08:23,990 Dan di sana kita dapat mengatur properti judul ke nilai target acara karena peristiwa DST mengubah acara target adalah bidang 106 00:08:23,990 --> 00:08:28,880 input kami dan properti nilai kemudian memegang nilai yang dimasukkan pengguna. 107 00:08:28,880 --> 00:08:35,240 Jadi saya ulangi dan ulangi logika yang sama di sini untuk jumlah dan taruh di sana. 108 00:08:35,240 --> 00:08:41,800 Jadi di sana kami juga menambahkan perubahan tetapi tentu saja kami memperbarui bidang jumlah. 109 00:08:41,830 --> 00:08:50,240 Maka dengan itu jika kita menyimpan ini kita kembali ke program kita di sini dan sekarang masukkan apel lima di sini. 110 00:08:50,380 --> 00:08:55,720 Yah kita melihat ini umumnya bekerja kita bisa mengetik di sini yang merupakan pertanda baik yang berarti kita memberi makan negara 111 00:08:55,720 --> 00:08:58,030 dengan benar kembali ke input ini dan seterusnya. 112 00:08:58,210 --> 00:09:04,660 Tapi kami juga mendapat peringatan bahwa komponen berubah yang mengontrol input nomor tipe yang tidak terkontrol. 113 00:09:04,660 --> 00:09:11,230 Jadi apa alasan peringatan ini, apa yang salah tentang cara kita menyelamatkan negara kita di sini dan mengapa 114 00:09:11,230 --> 00:09:15,660 saya mendapatkan peringatan tentang input nomor jenis yang merupakan input kedua kami. 115 00:09:15,670 --> 00:09:17,170 Jika saya mengetik ke yang pertama.