Memahami perangkap kait reaksi Oleh Gigitan Ikan | Juni 2022

Jelajahi masalah klasik

Sekarang ketika kami mengembangkan proyek React, kami biasanya menggunakan Hooks.

Namun dalam proses pembangunannya seringkali kita menemui kendala. Masalah yang paling klasik adalah perangkap React Hooks.

Beberapa teman mungkin memiliki masalah yang sama, tetapi mereka mungkin tidak memahami dasar-dasar React. Mari kita bahas ini di sini.

Ini adalah aplikasi React sederhana:

Kita gunakan useState Untuk membuat count Situasi, dan nilainya terus meningkat count Pada awalnya useEffectKemudian cetak nilai terakhir count Di tempat lain useEffect Serentak.

Menurut Anda, apa yang akan dihasilkan dari konsol tersebut?

Inilah hasilnya:

Berikut adalah demo yang disematkan:

Konsol terus mengetik 0, 0, 0 … Alih-alih 0, 1, 2, 3, …kami berharap.

Perangkap ini ditutup.

Apa itu Komponen React Runtime?

• Komponen sebenarnya adalah simpul serat.
• Dan setiap simpul serat memiliki properti yang disebut memorizedState Apakah daftar tertaut.
• Setiap kait memiliki komponen yang sesuai dengan simpul memorizedState Daftar ditautkan dan mereka memiliki akses ke nilainya dari simpul yang sesuai.

Misalnya, dalam contoh di atas ada tiga kait dan masing-masing sesuai dengan simpul di dalamnya memorizedState daftar tertaut:

Setiap kait kemudian mengakses kaitnya sendiri memorizedState Untuk menyempurnakan logikanya.

Jalankan kailnya

Sebuah hook memiliki dua langkah: instalasi dan update.

Fungsi mount dijalankan saat hook pertama kali dibuat, dan fungsi update dijalankan setiap kali hook diperbarui.

Berikut implementasinya useEffect :

Bagaimana kait menangani kedalaman?

Di sini kita harus memperhatikan cara penanganannya deps Parameter: Jika deps Jadi tidak terdefinisi deps Itu dianggap tidak masuk akal.

Dimensi berikutnya membandingkan masa lalu deps Dengan deps Itu ada di sana memorizedState Sebelumnya: Jika ini ganda, fungsi yang diberikan sebelumnya digunakan secara langsung, jika tidak, fungsi baru dibuat.

Logika untuk membandingkan apakah dua deps Persamaannya sangat sederhana: jika sebelumnya deps Adalah nullKemudian kembali false Langsung, yaitu, mereka tidak sama; Jika tidak, array digulir dan dibandingkan secara bergantian.

Jadi kita bisa menarik tiga kesimpulan:

• Jika deps Parameter dari useEffect Tidak ditentukan atau kosong, fungsi panggilan balik dibuat dan dijalankan di setiap render.
• Jika array kosong, efeknya hanya diterapkan sekali.
• Jika tidak, itu akan membandingkan apakah setiap elemen dalam deps Array telah berubah untuk memutuskan apakah akan menerapkan efek.

Anda mungkin sudah mengetahui hasil ini sebelum membaca artikel ini, tetapi di sini kami memahaminya dari segi kode sumber.

Kait seperti useMemo Dan useCallback Juga menangani deps dengan cara yang sama:

Kita tahu dua hal dari diskusi sebelumnya:

• Kait seperti useEffect Akses data di memriorizedState.
• Kait memutuskan apakah akan menjalankan fungsi panggilan balik dengan membandingkannya deps Adalah sama.

Perangkap

Sekarang kembali ke pertanyaan terakhir kita. Kami menulis kode seperti ini:

useEffect(() => 
const timer = setInterval(() => 
setCount(count + 1);
, 500);
, []);useEffect(() => 
const timer = setInterval(() => 
console.log(count);
, 500);
, []);

deps Array kosong, jadi efek ini hanya berjalan sekali.

Jalankan kode sumber yang relevan sebagai berikut:

Pekerjaan yang akan dilakukan ditandai dengan HasEffect Dan kemudian itu berlari:

Sejak deps Ada array kosong di sini, itu tidak ada HasEffect Bendera. Efeknya tidak akan diterapkan lagi.

Jadi pengatur waktu kami setInterval Akan ditetapkan hanya sekali Oleh karena itu, keadaan yang dirujuk oleh fungsi panggilan selalu merupakan keadaan awal dan keadaan terakhir tidak dapat diperoleh.

Jika kita ingin mendapatkan Negara terakhir, kita harus mengizinkannya fn Jalankan sekali di setiap rendering, yang berarti kita harus pergi count Dalam larik ketergantungan

useEffect(() => 
setInterval(() => 
setCount(count + 1);
, 1500);
, [count]);useEffect(() => 
setInterval(() => 
console.log(count);
, 1500);
, [count]);

Inilah hasilnya:

Tampaknya fn Itu mendapat status terbaru, tetapi mengapa hasil konsol begitu berantakan?

Ini karena setiap efek menciptakan interval waktu. Jadi kita harus menghapus interval waktu sebelumnya dalam efek.

kode:

useEffect(() => 
let timer = setInterval(() => 
setCount(count + 1);
, 1500);
return () => clearInterval(timer);
, [count]);useEffect(() => 
let timer = setInterval(() => 
console.log(count);
, 1500);
return () => clearInterval(timer);
, [count]);

Demo daring:

Dengan cara ini, kami akhirnya memecahkan perangkap tertutup ini.

Daftar tertaut yang disebut memorizedState Disimpan dalam simpul serat. Node dalam daftar tautan cocok dengan kait satu per satu, dan setiap kait memiliki akses ke data simpulnya masing-masing.

Kait seperti useEffectkan useMomoDan useCallback Setiap orang memiliki satu deps Parameter. Baru dan lama deps Itu dibandingkan setiap kali render dilakukan dan jika fungsi panggilan balik dijalankan lagi deps Perubahan.

Oleh karena itu, kait dengan parameter undefined Dan null Akan menjalankan rendering apa pun, Kaitkan dengan parameter [] Berjalan hanya sekali dan terhubung dengan parameter [state] Ini hanya akan berjalan lagi ketika mode berubah.

Alasan untuk menutup jebakan adalah karena posisi khusus di kait seperti itu useEffectTapi belum ditambahkan ke dalamnya deps Array, sehingga meskipun mode diubah, fungsi callback tidak berjalan lagi dan masih menunjuk ke mode lama.

Perangkap tertutup juga dapat dengan mudah diperbaiki, kita hanya perlu menyesuaikannya deps Array Dengan cara ini, setiap kali status berubah, fungsi panggilan balik dijalankan lagi dengan mengacu pada status baru. Namun, kita juga harus memperhatikan pembersihan timer sebelumnya, pendengar acara, dan sebagainya.