在React函数组件开发过程中，useState作为基础的状态管理Hook被广泛应用，但不少开发者都遇到过调用状态更新函数后，当前作用域内无法拿到最新状态值的问题，这本质上和useState的异步更新特性有关。
useState的异步更新机制
React为了优化性能，会将多次useState的状态更新操作进行批量处理，不会在每次调用更新函数时立即触发组件重新渲染并更新状态值。也就是说，调用setState之后，状态并不会马上发生变化，而是会被React放入更新队列，等待合适的时机统一处理。
我们可以通过一个简单的示例来验证这个特性：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
// 调用更新函数后立即打印状态，拿到的是旧值
console.log('点击后即时count值:', count);
};
return (
<div>
<p>当前计数: {count}</p>
<button onClick={handleClick}>增加计数</button>
</div>
);
}
export default Counter;
点击按钮后，控制台输出的会是更新前的count值，而页面渲染的count已经变成了1，这就是异步更新带来的直观表现。
获取useState即时值的常用方法
1. 使用useEffect监听状态变化
useEffect会在组件渲染完成后执行，当状态更新触发组件重新渲染时，useEffect的依赖数组中的状态变化就会触发回调，此时可以拿到最新的状态值。
import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
// 监听count变化，变化时拿到最新值
useEffect(() => {
console.log('useEffect中拿到的最新count:', count);
}, [count]);
return (
<div>
<p>当前计数: {count}</p>
<button onClick={handleClick}>增加计数</button>
</div>
);
}
export default Counter;
2. 使用函数式更新传递最新状态
如果下一次状态更新依赖当前的最新状态，可以使用函数式的更新方式，函数的参数就是上一次的最新状态，这样可以避免拿到旧值的问题。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
// 函数式更新，参数prev是上一次的最新状态
setCount(prev => {
console.log('函数式更新中的prev值:', prev);
return prev + 1;
});
};
return (
<div>
<p>当前计数: {count}</p>
<button onClick={handleClick}>增加计数</button>
</div>
);
}
export default Counter;
3. 使用useRef保存最新状态
useRef创建的引用对象在组件的整个生命周期内保持不变，修改它的current属性不会触发组件重新渲染，我们可以用它来同步保存最新的状态值，随时获取。
import { useState, useRef, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
// 每次count更新时，同步更新ref的current值
useEffect(() => {
countRef.current = count;
}, [count]);
const handleClick = () => {
setCount(count + 1);
// 通过ref拿到最新的状态值，不需要等待渲染完成
console.log('通过ref拿到的即时count:', countRef.current);
};
return (
<div>
<p>当前计数: {count}</p>
<button onClick={handleClick}>增加计数</button>
</div>
);
}
export default Counter;
注意事项
需要注意的是，React的批量更新机制在React 18及以后的版本中，默认会对所有更新进行批量处理，包括异步回调中的更新。如果需要在某些场景下打破批量更新获取即时值，需要结合具体的业务逻辑选择合适的方案，不要盲目追求即时获取状态值，避免破坏React的性能优化逻辑。
另外，不要在render阶段直接执行获取即时状态的逻辑，因为render阶段可能会被执行多次，导致逻辑异常，状态相关的副作用处理尽量放在useEffect中执行。