Counter

KEMASKINI:Lihat kembali siaran ini dan jadilah lebih bijak dan tolong jangan lakukan ini.

Gunakanref或创建一个没有的自定义hook.

export const useClassicEffect = createClassicEffectHook(); function createClassicEffectHook() { if (import.meta.env.PROD) return React.useEffect; return (effect: React.EffectCallback, deps?: React.DependencyList) => { React.useEffect(() => { let isMounted = true; let unmount: void | (() => void); queueMicrotask(() => { if (isMounted) unmount = effect(); }); return () => { isMounted = false; unmount?.(); }; }, deps); }; }

Sejak React 18, apabila anda menggunakanStrictMode进行开发时，

useEffectadalah perkara biasa untuk dipanggil dua kali semasa pemasangan. Inilah yang mereka ada dalamDokumentasi:

Ini mungkin kelihatan pelik, tetapi pada akhirnya, kami menulis kod React yang lebih baik dengan menyimpan cache permintaan HTTP dan menggunakan fungsi pembersihan apabila terdapat isu antara dua panggilan, bebas pepijat, mematuhi garis panduan semasa dan serasi dengan versi masa hadapan . Berikut adalah contoh:

/* Having a setInterval inside an useEffect: */ import { useEffect, useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => setCount((count) => count + 1), 1000); /* Make sure I clear the interval when the component is unmounted, otherwise, I get weird behavior with StrictMode, helps prevent memory leak issues. */ return () => clearInterval(id); }, []); return
           

            {count}
           
; }; export default Counter;

Dalamartikelyang sangat terperinci ini, pasukan React menerangkanuseEffectseperti tidak pernah berlaku sebelum ini dan menggambarkannya dengan contoh:

Untuk kes penggunaan khusus anda, anda boleh membiarkannya seperti sedia ada, jangan risau. Dan anda tidak boleh cuba menggunakan teknik ini denganuseEffect中的useRef和if语句一起使用以使其触发一次，或删除StrictModeuseRef danif pernyataan dalamuseEffect untuk membuatnya menyala sekali, atau mengalih keluar

StrictMode kerana seperti yang Anda dapati ia di

DokumenuseEffect，正如他们在/* As a second example, an API call inside an useEffect with fetch: */ useEffect(() => { const abortController = new AbortController(); const fetchUser = async () => { try { const res = await fetch("/api/user/", { signal: abortController.signal, }); const data = await res.json(); } catch (error) { // ℹ️: The error name is "CanceledError" for Axios. if (error.name !== "AbortError") { /* Logic for non-aborted error handling goes here. */ } } }; fetchUser(); /* Abort the request as it isn't needed anymore, the component being unmounted. It helps avoid, among other things, the well-known "can't perform a React state update on an unmounted component" warning. */ return () => abortController.abort(); }, []);

function TodoList() { const todos = useSomeDataFetchingLibraryWithCache(`/api/user/${userId}/todos`); // ...

Jika anda masih menghadapi masalah, mungkin anda menggunakanuseEffect dan seperti yang mereka katakan pada useEffect di tempat pertama > /belajar/menyegerakkan-dengan-kesan#not-an-effect-initializing-the-application" rel="noreferrer">Bukan Kesan: Memulakan Aplikasidan

Bukan Kesan: Membeli Produk , saya syorkan anda membaca artikel Secara keseluruhan.