Sekarang jika kita telah melihat begitu banyak kait yang berbeda mari kita mundur atau benar-benar tetap di dunia
kait tetapi lihat bagaimana kita dapat mengoptimalkan proyek kita bagaimana kita bisa.
Sebuah Apa.
Siklus penulisan ulang yang tidak perlu karena itu tentu saja sesuatu yang mungkin kita semua tertarik lakukan
untuk memastikan bahwa kita memiliki aplikasi yang berkinerja baik.
Dan untuk itu mari kita lihat jatah bahannya yang jatuh.
Di sana kami mengelola banyak logika yang harus kami periksa dengan pasti di sana kami mengubah status pemuatan
misalnya dan kami memperbarui UI dalam kasusnya.
Dan satu hal yang sudah bisa saya lihat di sana adalah bahwa misalnya dengan
meneruskan menambahkan penambah bahan ke bentuk bahan dan menambahkan penangan bahan pada akhirnya adalah fungsi Keadilan.
Ini berarti bahwa karena itu adalah fungsi yang didefinisikan di dalam komponen fungsi ini setiap
kali komponen disfungsional dibangun kembali dan oleh karena itu seluruh fungsi dieksekusi lagi fungsi ini akan dibuat kembali.
Sekarang catatan tambahan di sini dengan cara mengurangi teman tidak akan membuatnya kembali tentu saja ini
dipanggil lagi tetapi bereaksi teks pada peredam ini sudah diinisialisasi untuk komponen ini dan menggunakan nilai yang
sudah diinisialisasi.
Jadi itu tidak masalah tapi di sini untuk menambahkan penangan bahan dan sebagainya.
Kami sedang membuat fungsi baru, fungsi baru ini hari ini untuk diturunkan ke bentuk
bahan dan karenanya menjadi bahan untuknya.
Meskipun saya menggunakan memo reaksi, ini akan membangun kembali dan saya dapat membuktikan ini kepada Anda dapat melemparkan
dalam bentuk bahan render kunci konsol dan jika Anda mati secara radikal hanya akan diberikan setiap kali kita mengetik di sana karena
ini adalah satu-satunya hal yang mengubah bentuk.
Dan tentu saja ketika kita pertama kali dimuat tetapi yang akan Anda lihat adalah bahwa misalnya jika saya menambahkan
sesuatu tes lima mari kita bersihkan log di depan.
Tambahkan bahan yang Anda lihat itu disusun ulang banyak dan itu masuk akal karena itu dibuat saat
kami mengubah status pemuatan.
Yah sebenarnya itu masuk akal karena kita keluar meletakkan indikator pemuatan di sini tetapi
juga dirender kembali setelah data ada di sana dan kita keluar meletakkan data di sana dan ini bukan yang
kita inginkan kita tidak ada alasan untuk membuat tidak untuknya jika kita hanya mengeluarkan beberapa data di sana.
Jadi itu harus menjadi satu siklus render terlalu banyak yang kita miliki di sini masuk akal karena kita beralih memuat dari kesalahan
ke benar dan kemudian kembali dari yang benar ke yang salah dilakukan.
Jadi kita pasti akan merender dua kali karena loading spinner dalam bentuk tetapi output ketiga di
sini tidak masuk akal.
Kita tidak bisa menghilangkan hutang dengan membungkus menambahkan pengendali Regan dengan menggunakan callback yang sudah kita lihat sebelumnya.
Untuk itu Anda perlu mengimpor callback bekas dari reaksi tentu saja dan kemudian Anda membungkus
seluruh fungsi handler Anda dengan itu dan kemudian Anda menambahkan tanda kurung tempat Anda mendefinisikan dependensi dari fungsi ini.
Ketergantungan di sini adalah pengiriman HBP yang tidak perlu Anda tentukan karena sama seperti fungsi memperbarui dari
penggunaan.
Negara melakukan ini dijamin dengan bereaksi untuk tidak mengubah antara siklus penyaji.
Jadi Anda bisa menambahkan tetapi Anda tidak perlu bahan adalah argumen lokal kita mulai berfungsi bukan yang eksternal
dan tidak ada yang perlu kita lakukan di sana.
Oleh karena itu secara keseluruhan tidak ada apa pun di sini yang menjadi ketergantungannya sehingga fungsi ini sebenarnya tidak
boleh dibangun kembali.
Selalu memiliki fungsi yang sama.
Ia tidak memiliki dependensi eksternal selain mengirimkan HDB yang seperti yang saya katakan dikelola oleh reaksi sehingga tidak
akan berubah.
Jadi itu bukan ketergantungan jika kita melakukannya.
Jika kami login Anda dan saya tambahkan bahan lain di sini.
Kami hanya melihat dua siklus render yang ketiga hilang karena disfungsi menambahkan penangan bahan sekarang tidak
dibangun kembali.
Kami meneruskan fungsi ini ke dalam bentuk bahan, tetapi karena tidak berubah di antara siklus render, memo
reaksi mendeteksi bahwa fungsi baru yang kami peroleh ketika komponen induk dibangun kembali adalah fungsi
lama karena itu tidak membangun kembali komponen ini. .
Memuat ketika itu berubah tentu saja menerobos itu sebagaimana mestinya dan memicu membangun kembali pada formulir bahan
jika itu berubah jika memuat tidak akan berubah jika kita memiliki kesalahan sebelumnya dan jatuh untuk siklus
render berikutnya juga.
Ini tidak akan dibangun kembali.
Jadi sekarang kita mengambil keuntungan dari React memo di sini.
Hal yang sama untuk daftar bahan ketika kami mengganti bahan.
Ini harus dibangun kembali tetapi sekarang semua akan membangun kembali sepanjang waktu karena kita melewati ruangan dan menghapus
penangan bahan dan itu saja dan tidak membungkus dengan menggunakan panggilan balik.
Hasilnya adalah daftar bahan akan selalu dibangun kembali terlalu sering.
Jika kita menambahkan pernyataan log konsol dalam daftar rendering mereka sesuatu seperti ini maka Anda akan melihat tentu saja memuat awalnya beberapa kali karena
kondisi pemuatan mengubahnya memuat awalnya dan kemudian memuat setelah data ada
tetapi Anda semua akan untuk melihat bahwa semua terendah dalam kasus di mana seharusnya tidak
Sebagai contoh jika saya mengklik Tes di sini terlalu sering.
Tentu saja itu harus di-render setelah data hilang tetapi seharusnya tidak di-render hanya karena kami menunjukkan pemintal
pemuatan di sana dan itu adalah jari pertama yang kami lakukan.
Jadi logika yang sama berlaku sebelum dependensi daftar bahan ada di item hapus.
Harap dicatat saya tidak menggunakan memo persegi di sini.
Jadi perubahan berikut tidak akan menghasilkan sendiri.
Tapi tetap saja itu langkah pertama.
Hapus penangan bahan.
Kami menggunakan callback digunakan di sini dan membungkusnya membungkus seluruh fungsi ini dengannya dan kemudian menentukan
dependensi dependensi yang mengirim HDP yang sebagaimana disebutkan tidak harus ditentukan ide bahan dan
nilai internal bukan yang eksternal.
Tidak ada hal lain di sana yang penting.
Jadi ini adalah array kosong.
Sekarang lagi seperti yang disebutkan tidak sendirian tidak akan membuat perbedaan jika saya menghapus tes di sini
kita masih melihat banyak daftar bahan yang dirender ulang sekarang masuk akal karena daftar bahan.
Saya tidak menggunakan memo reaksi jadi tentu saja kita bisa melakukan ini.
Kita dapat menggunakan memo reaksi di sini.
Bungkus seluruh komponen ini dengan ini seperti ini dan jika kita melakukannya, login bersihkan dan saya klik pisang.
Kami hanya merendernya sekali sehingga kami memiliki efek yang kami inginkan. Kami hanya merender ini ketika ini berubah tidak ketika sesuatu
yang sama sekali berbeda dan tidak ada yang salah dengan melakukan ini dan sebenarnya melakukan
ini pendekatan yang biasanya akan digunakan.
Masih saya ingin menunjukkan kepada Anda alternatif karena selalu ada dan tidak pernah mengait.
Anda dapat menggunakan dan itulah penggunaan memo hook menggunakan callback adalah hook untuk menyimpan fungsi yang tidak berubah sehingga tidak
ada fungsi baru yang dihasilkan.
Gunakan memo adalah pengait di mana Anda dapat menyimpan nilai yang disimpan sehingga nilainya
tidak dibuat ulang dan itu adalah cara menghafal komponen.
Jadi di sini akan menjadi daftar bahan kami.
Biarkan saya memotongnya dari sana dan menambahkan daftar bahan di sini.
Mungkin Anda suka ini.
Dan sekarang gunakan memo gunakan di sini.
Berikan fungsi padanya.
Ini bukan fungsi yang sekarang hafal.
Sebaliknya itu adalah fungsi yang bereaksi akan dijalankan untuk Anda dan fungsi itu harus kembali ke
nilai yang ingin Anda hafal daftar bahan di sini.
Sekarang gunakan memo juga membutuhkan argumen kedua yang merupakan daftar dependensi yang Anda miliki.
Ini memberi tahu reaksi ketika harus menjalankan kembali fungsi ini untuk membuat objek baru yang harus dihafalnya dan kita
tahu itu harus menjalankan kembali fungsi ini setiap kali bahan pengguna berubah.
Jadi mari kita tambahkan ini di sini atau setiap kali hapus perubahan penangan bahan dan itu tidak boleh berubah karena kami
membungkus Ayah dengan menggunakan panggilan balik.
Jadi hanya perubahan untuk menggunakan bahan-bahan kami yang benar-benar dijalankan kembali berfungsi dan membangun kembali daftar
bahan baru dan sekarang daftar bahan tentu saja sesuatu yang bisa kita hasilkan di bawah daftar bahan mereka seperti ini.
Kami menyimpan ini dan kami memasukkan bahan-bahan yang diberikan.
Sekarang mari kita tambahkan pisang di sini.
10 tambahkan ini kita perbarui daftar bahan sekali jika saya menghapusnya kita memperbaruinya sekaligus itu adalah alternatif untuk
bereaksi memo.
Sekarang jika kita berbicara tentang menyimpan komponen, Anda biasanya ingin menggunakan memo reaksi daripada menggunakan memo.
Namun perlu diingat bahwa dengan menggunakan memo Anda tidak dapat menyimpan data apa pun yang tidak ingin Anda buat ulang pada
setiap perubahan citra atau siklus komponen ini.
Jadi jika Anda memiliki beberapa operasi yang menghitung nilai yang lebih kompleks menghitung nilai yang
mungkin membutuhkan waktu lebih lama untuk dihitung daripada yang ingin Anda pertimbangkan untuk membungkusnya dengan memo penggunaan sehingga tidak
dihitung ulang setiap kali komponen membuat tetapi benar-benar hanya dihitung ulang ketika Anda Saya harus menghitung ulang.
Itulah idenya di sini.
Sekarang optimasi terakhir yang ingin saya terapkan ada di sini pada model kesalahan.
Pada penutupan kita sebut disfungsi kesalahan yang jelas dan di sana lagi kita dapat menggunakan use callback untuk memastikan
bahwa modal kesalahan tidak dirender secara tidak perlu.
Kami tidak memiliki dependensi eksternal di sini jadi sesederhana itu.
Dan sekarang kami juga memastikan bahwa model kesalahan yang sudah menggunakan memo reaksi tidak dirender kembali dalam kasus di
mana seharusnya tidak.
Jadi ini adalah beberapa optimasi yang dapat Anda terapkan dan harus Anda pikirkan sekarang.
Ini bukan akhir dunia jika Anda melupakannya karena rendering ulang terdengar seperti pekerjaan yang sangat intensif.
Jika komponen kecil pembaruan mudah mungkin sangat cepat untuk membuat ulang dan membuat ulang selalu berarti dirender
dalam hak DOM virtual.
Anda mengetahui bahwa sejak awal kursus tidak berarti bahwa perubahan apa pun secara otomatis
ditulis ke Don asli tetapi bahkan rendering DOM virtual dapat dihindari dengan menggunakan memo penggunaan callback dan bereaksi
memo.
Tetapi jika Anda memiliki komponen yang sangat sepele bahkan mungkin tidak layak untuk menambahkan memo reaksi sehingga Anda tidak harus
membungkus setiap komponen dengan reaksi.
Memo pernah menggunakan memo karena bereaksi dan selalu perlu memeriksa apakah props berubah dan jika
komponen super kecil rendering itu mungkin lebih cepat daripada melakukan pemeriksaan itu.
Jadi itu selalu sesuatu yang harus Anda evaluasi dan pikirkan.
Sebagai contoh untuk model kesalahan kita mungkin bisa lolos dengan selalu kita render itu dan tidak
menggunakan memo RAC.
Jadi ini adalah contoh dan ini adalah hal-hal yang Anda hanya perlu bermain-main dengan tes dan juga memeriksa seberapa cepat aplikasi
Anda untuk mendapatkan perasaan untuk ini di mana itu masuk akal dan di mana itu tidak masuk akal.