Mengapakah useState dan borang kemas kini berfungsi dalam React diperlukan?
P粉041856955
P粉041856955 2023-08-24 13:38:45
0
2
402

Saya sedang membaca dokumentasi tentang kemas kini fungsi React Hook dan melihat ayat ini:

Butang "+" dan "-" menggunakan bentuk berfungsi kerana nilai yang dikemas kini adalah berdasarkan nilai sebelumnya

Tetapi saya tidak dapat melihat tujuan kemas kini fungsi dan perbezaan antara mereka dan menggunakan keadaan lama secara langsung semasa mengira keadaan baharu.

Mengapakah fungsi kemas kini React useState Hook memerlukan borang kemas kini fungsi? Apakah beberapa contoh yang perbezaannya jelas kelihatan (dan oleh itu menggunakan kemas kini langsung akan mengakibatkan ralat)?

Sebagai contoh, jika saya menukar contoh dalam dokumentasi kepada:

function Counter({initialCount}) { const [count, setCount] = useState(initialCount); kembali ( <> Kira: {count}  setCount(initialCount)}>Reset  setCount(prevCount => prevCount + 1)}>+  setCount(prevCount => prevCount - 1)}>-  ); }

Kemas kini kira

function Counter({initialCount}) { const [count, setCount] = useState(initialCount); kembali ( <> Kira: {count}  setCount(initialCount)}>Reset  setCount(count + 1)}>+  setCount(count - 1)}>-  ); }

Saya tidak nampak sebarang perbezaan dalam tingkah laku dan tidak dapat membayangkan situasi di mana kiraan tidak akan dikemas kini (atau tidak dikemas kini). Kerana setiap kali kiraan berubah, penutupan baharu akan dipanggil untuk menangkap kiraan terkini.

P粉041856955
P粉041856955

membalas semua (2)
P粉986937457

Saya menghadapi keperluan ini baru-baru ini. Sebagai contoh, katakan anda mempunyai komponen yang mengisi tatasusunan dan dapat memuatkan sumber dinamik 10 item setiap kali berdasarkan beberapa tindakan oleh pengguna (seperti dalam kes saya apabila pengguna terus menatal ke bawah skrin .Kod itu kelihatan sedikit seperti ini:

function Stream() { const [feedItems, setFeedItems] = useState([]); const { fetching, error, data, run } = useQuery(SOME_QUERY, vars); useEffect(() => { if (data) { setFeedItems([...feedItems, ...data.items]); } }, [data]); // <---- 这违反了hooks的规则,缺少了feedItems ...  ...

Jelas sekali, anda tidak boleh hanya menambah feedItems pada senarai kebergantungan useEffect hook kerana anda sedang memanggil setFeedItems di dalamnya, jadi anda akan terperangkap dalam satu gelung.

Kemas kini berfungsi untuk menyelamatkan:

useEffect(() => { if (data) { setFeedItems(prevItems => [...prevItems, ...data.items]); } }, [data]); // <--- 现在一切都好了
    P粉238355860

    Dalam React, kemas kini status adalah tidak segerak. Oleh itu, pada kemas kini seterusnya, mungkin terdapat nilai lama dalamcount. Sebagai contoh, bandingkan keputusan dua contoh kod berikut:

    function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count}    ); }

    dan

    function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count}    ); }
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!