在反应挂钩中更新状态

Question

1。

const [count, setCount] = useState(0);

setCount(count+1);

OR

2。

const [count, setCount] = useState(0);

setCount(count => count+1);

对于何时应该使用两种更新组件状态的方式感到困惑，它有什么区别？谢谢。

Answer 1

当新状态独立于先前状态时，请使用选项1，例如从服务器获取数据，而您只是替换当前状态。

当下一个状态依赖于当前状态（例如增加计数）时，请使用选项2。

顺便说一句，选项2的模式称为functional update，因为您向其传递了一个纯函数，该函数采用当前状态，对其进行突变，然后返回下一个状态。

以下是我创建的 计数 演示，旨在真正展示两者之间的区别以及区别的重要性。

const [count, setCount] = useState(0);

/**
  * count +3 click handler using naive state updates.
  */
const clickHandler1 = () => {
  // assume count equals some number n
  setCount(count + 1); // update queued, count === n, count = n + 1
  setCount(count + 1); // update queued, count === n, count = n + 1
  setCount(count + 1); // update queued, count === n, count = n + 1
  // when processed the count will be n + 1
};

/**
  * count +3 click handler using functional state updates.
  */
const clickHandler2 = () => {
  // assume count equals some number n
  setCount(count => count + 1); // update queued, count === n + 0, count = prevCount + 1
  setCount(count => count + 1); // update queued, count === n + 1, count = prevCount + 1
  setCount(count => count + 1); // update queued, count === n + 2, count = prevCount + 1
  // now when processed each call uses the result of the previous update
  // count will be n + 1 + 1 + 1, or n + 3
};