快照的概念

import { useState } from 'react';export default function Counter() {const [number, setNumber] = useState(0);return (<><h1>{number}</h1><button onClick={() => {setNumber(number + 1);setNumber(number + 1);setNumber(number + 1);}}>+3</button></>)
}

上面的例子，最终输出的结果是什么呢？

React 函数组件 Counter 中，有一个按钮用于增加状态 number 的值。当按钮被点击时，会触发 onClick 事件处理函数，在该函数中连续三次调用 setNumber(number + 1)。

由于 React 的状态更新（通过 setNumber）是异步的，这些更新会被放入一个队列中，然后 React 将它们批量处理以提高性能。这意味着，尽管你在事件处理函数中连续三次调用了 setNumber，实际的状态更新可能不会立即发生，而是会被合并和延迟处理。

具体到这个例子中，尽管你调用了三次 setNumber，React 会将这些更新合并，最终只增加一次状态值，因为最后一次状态更新覆盖了前两次的更新。所以，即使按钮上写的是 “+3”，实际上 number 状态只增加了 1。

至于何时执行更新，React 通常会在当前的事件循环结束后异步执行状态更新。这意味着，如果用户界面在执行 setNumber 调用时是响应的，那么状态更新和组件重新渲染会在浏览器的下一次绘制周期中进行，通常是在当前执行栈清空并且宏任务（如 setTimeout 或 requestAnimationFrame）队列为空时。这样可以确保在更新发生前，用户的操作已经被处理完毕，从而提高应用的响应性和性能。

如果你希望每次点击都能使 number 增加 3，你需要这样写 setNumber 的调用：

<button onClick={() => {setNumber(n => n+1)setNumber(n => n+1)setNumber(n => n+1)
}}>+3</button>

总结

• 设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。
• React 会在事件处理函数执行完成之后处理 state
• 更新。这被称为批处理。 要在一个事件中多次更新某些 state，你可以使用 setNumber(n => n + 1) 更新函数。