Dalam React, apakah perbezaan antara mencipta fungsi di dalam useEffect() dan mengimportnya daripada fail lain?

Question

Di tempat kerja, saya terjumpa kod seperti ini

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

Di sini, kita dapat melihat bahawa terdapat fungsi yang dipanggil updateValues() dalam useEffect(), yang boleh melakukan pelbagai kemas kini status. Saya diberitahu untuk mengeksport fungsi ini ke dalam fail lain untuk menyelesaikan isu prestasi.

// file1.js
export const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };

// Component.js

import { updateValues } from "file1.js";

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

Saya tertanya-tanya sama ada perkara seperti ini sebenarnya adalah masalah dalam React? Dokumentasi React rasmi menyediakan pelbagai contoh fungsi dalam useEffect(), tetapi hampir tidak menyebut pengumpulan sampah. Saya tertanya-tanya sama ada kutipan sampah akan memusnahkan fungsi yang diimport dengan betul pada masa yang sesuai.

Andaian saya ialah mengimport fungsi atau apa-apa lagi mencipta sesuatu dalam ingatan yang kekal di sana walaupun kita tidak memerlukannya.

Saya tidak pasti sama ada soalan ini ialah soalan "berasaskan pendapat", kerana saya hanya mencari penjelasan tentang cara memori dan pengumpulan sampah berfungsi di dalam useEffect() .

Answer 1

Sebab anda dinasihatkan untuk melakukan ini ialah useEffect anda dicipta setiap kali kod komponen dijalankan - yang mungkin lebih kerap daripada yang dipaparkan. Semua perkara ini tidak digunakan 90% daripada masa ia dibuat, jadi ciptaan dan kutipan sampah mereka tidak berguna. Oleh itu, lebih banyak perkara yang boleh dialihkan di luar komponen, lebih baik. Jika fungsi yang diimport (atau fungsi yang anda buat di luar komponen berfungsi) mendapat sampah dikumpul, ia tidak begitu penting kerana ia hanya dibuat sekali, sedangkan apa-apa yang anda tentukan dalam komponen dicipta ratusan atau ribuan kali .

Sejujurnya fungsi anda dan penggunaannya agak pelik. Saya mengandaikan ia hanya pseudokod, kerana jika tidak, badan fungsi useEffect anda akan lebih baik, seperti ini

setNumber(10);
setSpeed(null);
setAngle(30);

Selain itu, pertimbangkan untuk menggunakan useReducer, yang membantu mentakrifkan fungsi di luar komponen dengan cara yang boleh difahami dengan lebih baik oleh pembangun.