javascript - 无法找到两种类型的数组状态更新之间的区别

Question

通常我会看到这种状态更新(这只是一个例子):

const NumArray = () => {
  const [numbers, setNumbers] = useState([])
  
  return (
    <div>
      <p>Numbers:[ {numbers} ]</p>
      /////////////////////
      <button onClick={() => setNumbers(prevState => [...prevState, 1])}>
      /////////////////////
        Click me
      </button>
    </div>
  )
}

但如果我使用这种变体，它仍然有效:

const NumArray = () => {
      const [numbers, setNumbers] = useState([])
      
      return (
        <div>
          <p>Numbers:[ {numbers} ]</p>
          /////////////////////
          <button onClick={() => setNumbers([...numbers, 1])}>
          /////////////////////
            Click me
          </button>
        </div>
      )
    }

我的问题是，这两种状态更新有什么区别？为什么人们倾向于使用回调函数？

Answer 1

useState 是异步的。它不会立即更新状态，但具有用于更新状态对象的队列。这样做是为了提高 React 组件的渲染性能。

即使它是异步的，useState 函数也不会返回 promise。因此，我们不能将 then 处理程序附加到它或使用 async/await 来获取更新的状态值。如果我们有一些状态变量需要根据另一个状态变量进行更新，我们就不能同步依赖更新后的状态变量。

状态更新通常发生在下一次渲染时，但即便如此也可能有所不同。批量更新取决于 react ，我们无法改变这一点。

所以这样写:

<button onClick={() => setNumbers(prevState => [...prevState, 1])}>

保证 prevState 实际上是之前的状态。当在没有回调的情况下编写它时，我们不太关心它是否是准确的先前状态。