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
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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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]); // <--- 现在一切都好了Dalam React, kemas kini status adalah tidak segerak. Oleh itu, pada kemas kini seterusnya, mungkin terdapat nilai lama dalam
count. 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} ); }