UseEffect Cara Melangkau Pemberian Awal Dan Hanya Pencetus Selepas Sebarang Perubahan Ketergantungan

harap anda berjaya saya lihat anda agak kecewa dengan useEffect bit tetapi jangan risau mari kita perbaiki bersama-sama dan selesaikan masalah.

Mengapa ia Heppen : Kawan saya useEffect dia sangat mudah: ia dijalankan selepas JSX juga apabila sebarang nilai dalam tatasusunan kebergantungannya berubah. tetapi kadangkala useEffect mencetuskan walaupun data dalam tatasusunan kebergantungan tidak berubah. Ini berlaku kerana pemaparan awal.

Penyelesaian : saya mungkin berbeza pendekatan maka anda jika saya membuat sebarang kesilapan sila beritahu saya dan ya ini berkesan jadi mari menyelam

Langkah 1 : buat 2 useref dalam kes saya componentA.tsx
Kami akan menggunakan dua rujukan untuk mengawal tingkah laku pemaparan awal:

const skippedInitialRender = useRef(false);
const wasInitialRender = useRef(false);

Langkah 2 : cipta useEffect

useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])

*Langkah 3 : * jalankan logik anda di dalam pernyataan if dan selesai

*Penjelasan : * Semasa pemaparan awal, kami menangguhkan pelaksanaan menggunakan setTimeout. Ini memastikan bahawa tidak kira berapa kali useEffect pencetus semasa pemaparan awal (2, 4 atau lebih), logik kami tidak akan berjalan. Logik hanya berjalan apabila nilai kebergantungan berubah semula selepas pemaparan awal.

Atas ialah kandungan terperinci UseEffect Cara Melangkau Pemberian Awal Dan Hanya Pencetus Selepas Sebarang Perubahan Ketergantungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!