Mengapakah useState dan borang kemas kini berfungsi dalam React diperlukan?

Question

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}
      <butang onClick={() => setCount(initialCount)}>Reset</button>
      <butang onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <butang onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

Kemas kini kira

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

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.

Answer 1

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

...
<button onClick={()=>run()}>获取更多</button>
...

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]);     //  <--- 现在一切都好了

Answer 2

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}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(prevCount => prevCount + 1); 
        setCount(prevCount => prevCount + 1)}
      }>+</button>
    </>
  );
}

dan

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(count + 1); 
        setCount(count + 1)}
      }>+</button>
    </>
  );
}