在反应钩子中更新状态

Question

1.

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

setCount(count+1);

或者

2.

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

setCount(count => count+1);

我不知道什么时候应该在组件中使用这两种更新状态的方法，它们有什么区别？谢谢。

Answer 1

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

当下一个状态取决于当前状态时，使用选项 2 ，例如增加计数。

顺便说一句，选项 2 的模式称为功能更新，因为您向它传递了一个纯函数，该函数接受当前状态、改变它并返回下一个状态。

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

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
};