当连续多次以相同的操作更新状态值时，React 内部会对传递来的新值进行比较，如果值相同，则会屏蔽后续的更新行为，从而防止组件频繁渲染的问题。但这也带来了一个使用误区

const App: React.FC = () => {
  
  const [count, setCount] = useState(() => 0);

  **const add = () => {
    setCount(count + 1);
    setCount(count + 1);
  };**
  
  return (
    <div>
      <h1>currentValue: {count}</h1>
      <button onClick={add}>count + 1</button>
    </div>
  );
};

export default App;

这里，我们在 add 函数内两次执行 count + 1 的操作，希望值增加 2，但是下一次更新渲染的结果只会增加 1

因为 state 的更新是异步的，所以进行第二次增加 1 的操作时，count 的值仍然为 0，而不是 1。react 在比较第二次传来的值时，发现两次状态更新的值是完全一致的，因此会默认阻止再次更新

基于 prev 计算并 return 新值

为了解决上述问题，可以使用函数的方式给状态赋新值。当函数执行时才通过函数的形参，拿到当前的状态值，并基于它返回新的状态值，如下

**const add = () => {
  setCount((prev) => prev + 1);
  setCount((prev) => prev + 1);
};**

传入的形参 prev 会对值进行更新计算，从而拿到更新后的值

当进行 state 状态修改时，如果新值依赖于旧值（基于旧值进行计算，最终得到新值），此时不要直接在外部进行计算，而是通过函数形参的方式拿到旧值，再进行计算，获得 return 的新值