1 00:00:02,330 --> 00:00:09,770 Sekarang jika kita telah melihat begitu banyak kait yang berbeda mari kita mundur atau benar-benar tetap di dunia 2 00:00:09,770 --> 00:00:15,050 kait tetapi lihat bagaimana kita dapat mengoptimalkan proyek kita bagaimana kita bisa. 3 00:00:15,050 --> 00:00:15,680 Sebuah Apa. 4 00:00:15,680 --> 00:00:20,810 Siklus penulisan ulang yang tidak perlu karena itu tentu saja sesuatu yang mungkin kita semua tertarik lakukan 5 00:00:20,810 --> 00:00:23,570 untuk memastikan bahwa kita memiliki aplikasi yang berkinerja baik. 6 00:00:24,060 --> 00:00:26,950 Dan untuk itu mari kita lihat jatah bahannya yang jatuh. 7 00:00:26,960 --> 00:00:33,230 Di sana kami mengelola banyak logika yang harus kami periksa dengan pasti di sana kami mengubah status pemuatan 8 00:00:33,230 --> 00:00:35,900 misalnya dan kami memperbarui UI dalam kasusnya. 9 00:00:35,900 --> 00:00:41,600 Dan satu hal yang sudah bisa saya lihat di sana adalah bahwa misalnya dengan 10 00:00:41,600 --> 00:00:47,450 meneruskan menambahkan penambah bahan ke bentuk bahan dan menambahkan penangan bahan pada akhirnya adalah fungsi Keadilan. 11 00:00:47,450 --> 00:00:52,970 Ini berarti bahwa karena itu adalah fungsi yang didefinisikan di dalam komponen fungsi ini setiap 12 00:00:52,970 --> 00:00:59,540 kali komponen disfungsional dibangun kembali dan oleh karena itu seluruh fungsi dieksekusi lagi fungsi ini akan dibuat kembali. 13 00:00:59,600 --> 00:01:05,690 Sekarang catatan tambahan di sini dengan cara mengurangi teman tidak akan membuatnya kembali tentu saja ini 14 00:01:05,690 --> 00:01:12,110 dipanggil lagi tetapi bereaksi teks pada peredam ini sudah diinisialisasi untuk komponen ini dan menggunakan nilai yang 15 00:01:12,110 --> 00:01:13,010 sudah diinisialisasi. 16 00:01:13,010 --> 00:01:16,820 Jadi itu tidak masalah tapi di sini untuk menambahkan penangan bahan dan sebagainya. 17 00:01:16,850 --> 00:01:21,890 Kami sedang membuat fungsi baru, fungsi baru ini hari ini untuk diturunkan ke bentuk 18 00:01:21,900 --> 00:01:24,080 bahan dan karenanya menjadi bahan untuknya. 19 00:01:24,110 --> 00:01:30,800 Meskipun saya menggunakan memo reaksi, ini akan membangun kembali dan saya dapat membuktikan ini kepada Anda dapat melemparkan 20 00:01:30,800 --> 00:01:39,020 dalam bentuk bahan render kunci konsol dan jika Anda mati secara radikal hanya akan diberikan setiap kali kita mengetik di sana karena 21 00:01:39,020 --> 00:01:41,740 ini adalah satu-satunya hal yang mengubah bentuk. 22 00:01:41,780 --> 00:01:48,140 Dan tentu saja ketika kita pertama kali dimuat tetapi yang akan Anda lihat adalah bahwa misalnya jika saya menambahkan 23 00:01:48,140 --> 00:01:51,240 sesuatu tes lima mari kita bersihkan log di depan. 24 00:01:51,260 --> 00:01:56,750 Tambahkan bahan yang Anda lihat itu disusun ulang banyak dan itu masuk akal karena itu dibuat saat 25 00:01:56,750 --> 00:01:58,270 kami mengubah status pemuatan. 26 00:01:58,310 --> 00:02:03,120 Yah sebenarnya itu masuk akal karena kita keluar meletakkan indikator pemuatan di sini tetapi 27 00:02:03,110 --> 00:02:08,910 juga dirender kembali setelah data ada di sana dan kita keluar meletakkan data di sana dan ini bukan yang 28 00:02:08,920 --> 00:02:14,640 kita inginkan kita tidak ada alasan untuk membuat tidak untuknya jika kita hanya mengeluarkan beberapa data di sana. 29 00:02:14,780 --> 00:02:19,970 Jadi itu harus menjadi satu siklus render terlalu banyak yang kita miliki di sini masuk akal karena kita beralih memuat dari kesalahan 30 00:02:19,970 --> 00:02:22,940 ke benar dan kemudian kembali dari yang benar ke yang salah dilakukan. 31 00:02:23,030 --> 00:02:27,890 Jadi kita pasti akan merender dua kali karena loading spinner dalam bentuk tetapi output ketiga di 32 00:02:27,890 --> 00:02:29,340 sini tidak masuk akal. 33 00:02:29,540 --> 00:02:38,430 Kita tidak bisa menghilangkan hutang dengan membungkus menambahkan pengendali Regan dengan menggunakan callback yang sudah kita lihat sebelumnya. 34 00:02:38,430 --> 00:02:44,760 Untuk itu Anda perlu mengimpor callback bekas dari reaksi tentu saja dan kemudian Anda membungkus 35 00:02:44,760 --> 00:02:52,450 seluruh fungsi handler Anda dengan itu dan kemudian Anda menambahkan tanda kurung tempat Anda mendefinisikan dependensi dari fungsi ini. 36 00:02:52,450 --> 00:02:58,240 Ketergantungan di sini adalah pengiriman HBP yang tidak perlu Anda tentukan karena sama seperti fungsi memperbarui dari 37 00:02:58,240 --> 00:02:58,840 penggunaan. 38 00:02:58,840 --> 00:03:03,880 Negara melakukan ini dijamin dengan bereaksi untuk tidak mengubah antara siklus penyaji. 39 00:03:03,910 --> 00:03:10,030 Jadi Anda bisa menambahkan tetapi Anda tidak perlu bahan adalah argumen lokal kita mulai berfungsi bukan yang eksternal 40 00:03:10,090 --> 00:03:13,290 dan tidak ada yang perlu kita lakukan di sana. 41 00:03:13,310 --> 00:03:20,110 Oleh karena itu secara keseluruhan tidak ada apa pun di sini yang menjadi ketergantungannya sehingga fungsi ini sebenarnya tidak 42 00:03:20,110 --> 00:03:21,190 boleh dibangun kembali. 43 00:03:21,190 --> 00:03:22,700 Selalu memiliki fungsi yang sama. 44 00:03:22,780 --> 00:03:29,230 Ia tidak memiliki dependensi eksternal selain mengirimkan HDB yang seperti yang saya katakan dikelola oleh reaksi sehingga tidak 45 00:03:29,230 --> 00:03:30,070 akan berubah. 46 00:03:30,160 --> 00:03:36,110 Jadi itu bukan ketergantungan jika kita melakukannya. 47 00:03:36,170 --> 00:03:43,150 Jika kami login Anda dan saya tambahkan bahan lain di sini. 48 00:03:43,230 --> 00:03:51,120 Kami hanya melihat dua siklus render yang ketiga hilang karena disfungsi menambahkan penangan bahan sekarang tidak 49 00:03:51,120 --> 00:03:52,470 dibangun kembali. 50 00:03:52,530 --> 00:03:59,070 Kami meneruskan fungsi ini ke dalam bentuk bahan, tetapi karena tidak berubah di antara siklus render, memo 51 00:03:59,070 --> 00:04:05,100 reaksi mendeteksi bahwa fungsi baru yang kami peroleh ketika komponen induk dibangun kembali adalah fungsi 52 00:04:05,130 --> 00:04:09,300 lama karena itu tidak membangun kembali komponen ini. . 53 00:04:09,300 --> 00:04:14,400 Memuat ketika itu berubah tentu saja menerobos itu sebagaimana mestinya dan memicu membangun kembali pada formulir bahan 54 00:04:14,400 --> 00:04:19,680 jika itu berubah jika memuat tidak akan berubah jika kita memiliki kesalahan sebelumnya dan jatuh untuk siklus 55 00:04:19,680 --> 00:04:20,820 render berikutnya juga. 56 00:04:20,880 --> 00:04:21,990 Ini tidak akan dibangun kembali. 57 00:04:22,290 --> 00:04:25,740 Jadi sekarang kita mengambil keuntungan dari React memo di sini. 58 00:04:26,010 --> 00:04:29,430 Hal yang sama untuk daftar bahan ketika kami mengganti bahan. 59 00:04:29,430 --> 00:04:35,550 Ini harus dibangun kembali tetapi sekarang semua akan membangun kembali sepanjang waktu karena kita melewati ruangan dan menghapus 60 00:04:35,550 --> 00:04:39,990 penangan bahan dan itu saja dan tidak membungkus dengan menggunakan panggilan balik. 61 00:04:39,990 --> 00:04:43,920 Hasilnya adalah daftar bahan akan selalu dibangun kembali terlalu sering. 62 00:04:44,130 --> 00:04:54,450 Jika kita menambahkan pernyataan log konsol dalam daftar rendering mereka sesuatu seperti ini maka Anda akan melihat tentu saja memuat awalnya beberapa kali karena 63 00:04:54,450 --> 00:04:59,670 kondisi pemuatan mengubahnya memuat awalnya dan kemudian memuat setelah data ada 64 00:04:59,670 --> 00:05:05,820 tetapi Anda semua akan untuk melihat bahwa semua terendah dalam kasus di mana seharusnya tidak 65 00:05:05,820 --> 00:05:09,570 Sebagai contoh jika saya mengklik Tes di sini terlalu sering. 66 00:05:09,570 --> 00:05:14,250 Tentu saja itu harus di-render setelah data hilang tetapi seharusnya tidak di-render hanya karena kami menunjukkan pemintal 67 00:05:14,250 --> 00:05:17,660 pemuatan di sana dan itu adalah jari pertama yang kami lakukan. 68 00:05:17,970 --> 00:05:25,350 Jadi logika yang sama berlaku sebelum dependensi daftar bahan ada di item hapus. 69 00:05:25,350 --> 00:05:27,560 Harap dicatat saya tidak menggunakan memo persegi di sini. 70 00:05:27,630 --> 00:05:30,620 Jadi perubahan berikut tidak akan menghasilkan sendiri. 71 00:05:31,350 --> 00:05:32,730 Tapi tetap saja itu langkah pertama. 72 00:05:32,820 --> 00:05:34,210 Hapus penangan bahan. 73 00:05:34,410 --> 00:05:41,880 Kami menggunakan callback digunakan di sini dan membungkusnya membungkus seluruh fungsi ini dengannya dan kemudian menentukan 74 00:05:42,360 --> 00:05:49,320 dependensi dependensi yang mengirim HDP yang sebagaimana disebutkan tidak harus ditentukan ide bahan dan 75 00:05:49,800 --> 00:05:52,470 nilai internal bukan yang eksternal. 76 00:05:52,500 --> 00:05:54,090 Tidak ada hal lain di sana yang penting. 77 00:05:54,090 --> 00:05:55,400 Jadi ini adalah array kosong. 78 00:05:55,470 --> 00:06:01,920 Sekarang lagi seperti yang disebutkan tidak sendirian tidak akan membuat perbedaan jika saya menghapus tes di sini 79 00:06:01,920 --> 00:06:07,680 kita masih melihat banyak daftar bahan yang dirender ulang sekarang masuk akal karena daftar bahan. 80 00:06:07,680 --> 00:06:11,280 Saya tidak menggunakan memo reaksi jadi tentu saja kita bisa melakukan ini. 81 00:06:11,310 --> 00:06:12,920 Kita dapat menggunakan memo reaksi di sini. 82 00:06:12,930 --> 00:06:21,180 Bungkus seluruh komponen ini dengan ini seperti ini dan jika kita melakukannya, login bersihkan dan saya klik pisang. 83 00:06:21,390 --> 00:06:27,600 Kami hanya merendernya sekali sehingga kami memiliki efek yang kami inginkan. Kami hanya merender ini ketika ini berubah tidak ketika sesuatu 84 00:06:27,810 --> 00:06:32,430 yang sama sekali berbeda dan tidak ada yang salah dengan melakukan ini dan sebenarnya melakukan 85 00:06:32,430 --> 00:06:34,320 ini pendekatan yang biasanya akan digunakan. 86 00:06:34,350 --> 00:06:38,540 Masih saya ingin menunjukkan kepada Anda alternatif karena selalu ada dan tidak pernah mengait. 87 00:06:38,550 --> 00:06:47,280 Anda dapat menggunakan dan itulah penggunaan memo hook menggunakan callback adalah hook untuk menyimpan fungsi yang tidak berubah sehingga tidak 88 00:06:47,310 --> 00:06:49,680 ada fungsi baru yang dihasilkan. 89 00:06:49,680 --> 00:06:56,520 Gunakan memo adalah pengait di mana Anda dapat menyimpan nilai yang disimpan sehingga nilainya 90 00:06:56,520 --> 00:07:01,650 tidak dibuat ulang dan itu adalah cara menghafal komponen. 91 00:07:01,650 --> 00:07:04,900 Jadi di sini akan menjadi daftar bahan kami. 92 00:07:04,950 --> 00:07:09,780 Biarkan saya memotongnya dari sana dan menambahkan daftar bahan di sini. 93 00:07:09,790 --> 00:07:10,950 Mungkin Anda suka ini. 94 00:07:11,930 --> 00:07:15,220 Dan sekarang gunakan memo gunakan di sini. 95 00:07:15,360 --> 00:07:16,740 Berikan fungsi padanya. 96 00:07:16,740 --> 00:07:18,960 Ini bukan fungsi yang sekarang hafal. 97 00:07:18,960 --> 00:07:24,030 Sebaliknya itu adalah fungsi yang bereaksi akan dijalankan untuk Anda dan fungsi itu harus kembali ke 98 00:07:24,030 --> 00:07:27,060 nilai yang ingin Anda hafal daftar bahan di sini. 99 00:07:27,060 --> 00:07:31,200 Sekarang gunakan memo juga membutuhkan argumen kedua yang merupakan daftar dependensi yang Anda miliki. 100 00:07:31,290 --> 00:07:37,320 Ini memberi tahu reaksi ketika harus menjalankan kembali fungsi ini untuk membuat objek baru yang harus dihafalnya dan kita 101 00:07:37,320 --> 00:07:41,460 tahu itu harus menjalankan kembali fungsi ini setiap kali bahan pengguna berubah. 102 00:07:41,460 --> 00:07:48,120 Jadi mari kita tambahkan ini di sini atau setiap kali hapus perubahan penangan bahan dan itu tidak boleh berubah karena kami 103 00:07:48,120 --> 00:07:50,160 membungkus Ayah dengan menggunakan panggilan balik. 104 00:07:50,370 --> 00:07:56,250 Jadi hanya perubahan untuk menggunakan bahan-bahan kami yang benar-benar dijalankan kembali berfungsi dan membangun kembali daftar 105 00:07:56,750 --> 00:08:03,960 bahan baru dan sekarang daftar bahan tentu saja sesuatu yang bisa kita hasilkan di bawah daftar bahan mereka seperti ini. 106 00:08:03,960 --> 00:08:08,560 Kami menyimpan ini dan kami memasukkan bahan-bahan yang diberikan. 107 00:08:08,700 --> 00:08:10,720 Sekarang mari kita tambahkan pisang di sini. 108 00:08:11,780 --> 00:08:20,530 10 tambahkan ini kita perbarui daftar bahan sekali jika saya menghapusnya kita memperbaruinya sekaligus itu adalah alternatif untuk 109 00:08:20,530 --> 00:08:21,730 bereaksi memo. 110 00:08:21,730 --> 00:08:28,360 Sekarang jika kita berbicara tentang menyimpan komponen, Anda biasanya ingin menggunakan memo reaksi daripada menggunakan memo. 111 00:08:28,360 --> 00:08:34,300 Namun perlu diingat bahwa dengan menggunakan memo Anda tidak dapat menyimpan data apa pun yang tidak ingin Anda buat ulang pada 112 00:08:34,300 --> 00:08:36,380 setiap perubahan citra atau siklus komponen ini. 113 00:08:36,430 --> 00:08:42,130 Jadi jika Anda memiliki beberapa operasi yang menghitung nilai yang lebih kompleks menghitung nilai yang 114 00:08:42,130 --> 00:08:48,910 mungkin membutuhkan waktu lebih lama untuk dihitung daripada yang ingin Anda pertimbangkan untuk membungkusnya dengan memo penggunaan sehingga tidak 115 00:08:48,910 --> 00:08:54,780 dihitung ulang setiap kali komponen membuat tetapi benar-benar hanya dihitung ulang ketika Anda Saya harus menghitung ulang. 116 00:08:54,790 --> 00:08:56,470 Itulah idenya di sini. 117 00:08:56,590 --> 00:09:00,230 Sekarang optimasi terakhir yang ingin saya terapkan ada di sini pada model kesalahan. 118 00:09:00,280 --> 00:09:06,670 Pada penutupan kita sebut disfungsi kesalahan yang jelas dan di sana lagi kita dapat menggunakan use callback untuk memastikan 119 00:09:06,670 --> 00:09:09,530 bahwa modal kesalahan tidak dirender secara tidak perlu. 120 00:09:09,640 --> 00:09:12,790 Kami tidak memiliki dependensi eksternal di sini jadi sesederhana itu. 121 00:09:12,940 --> 00:09:18,400 Dan sekarang kami juga memastikan bahwa model kesalahan yang sudah menggunakan memo reaksi tidak dirender kembali dalam kasus di 122 00:09:18,400 --> 00:09:19,510 mana seharusnya tidak. 123 00:09:19,510 --> 00:09:24,080 Jadi ini adalah beberapa optimasi yang dapat Anda terapkan dan harus Anda pikirkan sekarang. 124 00:09:24,100 --> 00:09:29,940 Ini bukan akhir dunia jika Anda melupakannya karena rendering ulang terdengar seperti pekerjaan yang sangat intensif. 125 00:09:29,950 --> 00:09:36,100 Jika komponen kecil pembaruan mudah mungkin sangat cepat untuk membuat ulang dan membuat ulang selalu berarti dirender 126 00:09:36,100 --> 00:09:37,870 dalam hak DOM virtual. 127 00:09:37,870 --> 00:09:42,640 Anda mengetahui bahwa sejak awal kursus tidak berarti bahwa perubahan apa pun secara otomatis 128 00:09:42,640 --> 00:09:48,550 ditulis ke Don asli tetapi bahkan rendering DOM virtual dapat dihindari dengan menggunakan memo penggunaan callback dan bereaksi 129 00:09:48,550 --> 00:09:49,240 memo. 130 00:09:49,300 --> 00:09:55,240 Tetapi jika Anda memiliki komponen yang sangat sepele bahkan mungkin tidak layak untuk menambahkan memo reaksi sehingga Anda tidak harus 131 00:09:55,240 --> 00:09:56,980 membungkus setiap komponen dengan reaksi. 132 00:09:56,980 --> 00:10:03,010 Memo pernah menggunakan memo karena bereaksi dan selalu perlu memeriksa apakah props berubah dan jika 133 00:10:03,010 --> 00:10:08,050 komponen super kecil rendering itu mungkin lebih cepat daripada melakukan pemeriksaan itu. 134 00:10:08,140 --> 00:10:11,120 Jadi itu selalu sesuatu yang harus Anda evaluasi dan pikirkan. 135 00:10:11,200 --> 00:10:17,020 Sebagai contoh untuk model kesalahan kita mungkin bisa lolos dengan selalu kita render itu dan tidak 136 00:10:17,020 --> 00:10:18,130 menggunakan memo RAC. 137 00:10:18,130 --> 00:10:23,290 Jadi ini adalah contoh dan ini adalah hal-hal yang Anda hanya perlu bermain-main dengan tes dan juga memeriksa seberapa cepat aplikasi 138 00:10:23,290 --> 00:10:28,120 Anda untuk mendapatkan perasaan untuk ini di mana itu masuk akal dan di mana itu tidak masuk akal.