为什么我在setState后读取不到最新的state
内容提要
setState函数在React中的运行机制是，它会用最新的state值去请求一个新的烘托，但正在运行的函数中的值不会受到影响。State表现为一个快照，组件在被调用时会为该次烘托提供一个state快照，然后根据这个快照计算出的值来执行烘托。在一次烘托中，state变量的值不会发生变化，因此正在运行的函数不会受到影响。解决这个问题的方法是，在更新state之前将其保存在一个变量中，然后将保存的变量传递给set函数。另外，如果需要在一次事务中多次更新同一个state，可以使用更新函数来实现。
延伸解读
为什么异步读取仍得到旧值
文章通过定时器示例说明，即使将读取操作延迟到setState之后，输出的仍是旧值。这是因为每次渲染中的state变量都是一个固定快照，其值在本次渲染周期内不会改变。异步操作无法突破这一限制，因为函数执行时捕获的state值已经确定。理解这一点有助于避免在异步回调中误用state。
批处理机制与更新队列
React会将事件处理函数中的多个setState调用放入队列，等函数执行完毕后再统一处理。这解释了为什么连续三次setNumber(number + 1)最终只增加1：每次调用都基于同一个快照值。这种批处理优化了性能，但也要求开发者注意更新逻辑的写法。
使用更新函数实现累积更新
若需要在一次事件中多次更新同一个state，应使用更新函数形式，如setNumber(n => n + 1)。这样每次更新都会基于前一次的结果，而非同一快照。文章指出，这是解决多次setState只生效一次问题的关键方法，尤其适用于需要连续累加的场景。
Q&A
为什么在调用setState后，读取到的state值不是最新的？
因为setState请求新的烘托，但不影响正在运行的函数中的state值，state表现为快照。
如何在React中正确更新state以获取预期结果？
可以将下一个状态保存在一个变量中，然后将该变量传递给set函数。
在React中，为什么多次调用setState只增加1而不是3？
因为每次setState都是基于同一个快照进行的，导致每次更新都是在上一次快照的基础上加1。
异步操作如何影响正在运行的函数中的state值？
异步操作不会改变正在运行的函数中的state值，定时器输出的值仍然是旧值。
如何在一次事件中多次更新同一个state？
可以使用更新函数，例如setNumber(n => n + 1)，来实现多次更新的预期结果。
React是如何处理state更新的？
React会在事件处理函数结束后处理state更新，形成一个更新队列。
