Menggunakan useEffect dan reactStrictMode: Mengoptimumkan komponen React untuk prestasi dan kebolehpercayaan

Question

Saya mempunyai cabaran, saya ingin memuatkan sebahagian daripada tatasusunan ke dalam tatasusunan baharu yang dipanggil "loadedData" dan hanya memaparkan data yang dimuatkan kerana komponen itu sangat berat.

Namun, pada pemuatan pertama, saya menghadapi banyak masalah kerana useEffect seolah-olah mengacaukannya. Pemuatan pertama berlaku dua kali, dan data pertama ditolak ke dalam tatasusunan sekali untuk setiap pemaparan. Jika saya mengalih keluar "reactStrictMode" ia berfungsi seperti yang diharapkan, tetapi saya tidak mahu "menipu" tanpa memahami akibatnya. Seseorang yang lebih memahami masalah daripada saya meletakkannya di sana atas sebab tertentu..

Status isLoading tidak boleh menghalang larian kedua semasa pemuatan awal - ini ialah cadangan yang saya perolehi dalam urutan lain yang berkaitan dengan isu ini.

Adakah sesiapa tahu mengapa useEffect pertama mengabaikan keadaan isLoading dan cara menanganinya?

// Cuba muatkan bahagian yang kelihatan, tetapi jangan muatkan lebih banyak
const [loadedData, setLoadedData] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const addMoreData = async () =>
    jika (loadedData.length >= data.length) kembali;

    const startIndex = loadedData.length;
    const preferredLoadLength = 1;

    const endIndex = startIndex + preferredLoadLength;

    const newData = data.slice(startIndex, endIndex);

    setLoadedData((sebelumnya) => [...sebelumnya, ...newData]);
};

// Semak sama ada jadual telah ditatal ke bawah selepas memasang dan mengambil data dan serta-merta perlu mengambil lebih banyak data
useEffect(() => {
    const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current;
    jika (
        scrollHeight == clientHeight &&
        scrollTop == 0 &&
        loadedData.length < data.length
    ) {
        const addNewDataFunction = async () =>
            jika (sedangMemuatkan) {
                kembali;
            }
            setIsLoading(true);
            tunggu addMoreData();
            setIsLoading(false);
        };
        addNewDataFunction();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data.length, loadedData.length, isLoading]);

Answer 1

Anda hanya boleh menukar baris ini dalam fungsi addMoreData

setLoadedData((prev) => [...prev, ...newData]);

untuk

setLoadedData([...loadedData, ...newData]);

Ini akan menyebabkan keadaan mengemas kini berdasarkan nilai semasa semasa pemaparan, sejak kali kedua useEffect运行时组件尚未重新渲染，所以第一个组件所做的更改尚未反映出来，因此loadedData ia belum dikemas kini lagi.

Apabila anda mengemas kini menggunakan borang berfungsi, prev ialah nilai langsung keadaan, adalah perkara biasa untuk anda menghadapi perkara ini apabila menggunakan mod ketat dalam pembangunan.

Akhirnya, hapuskan isLoading, ia tidak akan membantu menyelesaikan masalah.

Nota: Menggunakan bentuk fungsi setState adalah lebih disyorkan apabila mod ketat didayakan, tetapi tidak disyorkan dalam useEffect kerana cangkuk ini akan berjalan dua kali apabila komponen dipasang.
Selain itu, apabila anda memasukkan data.length dan loadedData.length dalam tatasusunan kebergantungan anda, ini akan menyebabkan data.length和loadedData.length时，这将使useEffect tercetus apabila salah satu nilai tersebut berubah.