useState在React 的合成事件处理函数和生命周期函数中表现为异步，但在某些特定情况下会表现出同步行为。这是一个常见的 React 面试题，需要分情况讨论：
1. 异步场景（最常见）
在 React 的事件处理函数和生命周期中，useState是异步批处理的：
function App() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); console.log(count); // 这里还是旧值，不会立即更新 setCount(count + 1); // 由于 count 还是旧值，两次 setCount 不会累加 // 最终结果只会 +1，而不是 +2 }; return <button onClick={handleClick}>点击</button>; }2. 同步场景
在某些特定环境下，useState会表现出同步行为：
a. 原生 DOM 事件
useEffect(() => { const button = document.getElementById('myButton'); button.addEventListener('click', () => { setCount(count + 1); console.log(count); // 在某些 React 版本中可能会看到更新后的值 }); }, []);b. 定时器回调
const handleClick = () => { setTimeout(() => { setCount(count + 1); console.log(count); // 可能表现为同步 }, 0); };c. Promise 回调
const handleClick = () => { Promise.resolve().then(() => { setCount(count + 1); console.log(count); // 可能表现为同步 }); };3. 如何获取更新后的值？
使用函数式更新（推荐）
setCount(prevCount => prevCount + 1); // 基于最新值更新使用 useEffect 监听变化
useEffect(() => { console.log('count 更新了:', count); // 这里能获取最新值 }, [count]);4. React 18+ 的变化
React 18 引入了并发模式，所有更新（包括在 setTimeout、Promise 等中的）都会默认被批处理：
// React 18 中，即使在 setTimeout 中也会被批处理 setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // 在 React 18 中只触发一次重新渲染 }, 1000);如果需要同步行为，可以使用ReactDOM.flushSync()（谨慎使用）：
import { flushSync } from 'react-dom'; flushSync(() => { setCount(count + 1); }); console.log(count); // 立即获取更新后的值总结
| 场景 | 行为 | 原因 |
|---|---|---|
| React 事件处理函数 | 异步 | React 的批处理机制 |
| 生命周期函数 | 异步 | 优化性能，减少不必要的渲染 |
| 原生 DOM 事件 | 可能同步 | 绕过 React 的事件系统 |
| setTimeout/Promise | React 17 可能同步，React 18 异步 | React 18 引入了自动批处理 |
最佳实践：
永远不要依赖更新后的状态值（除非在
useEffect中）使用函数式更新：
setState(prev => prev + 1)如果需要基于更新后的状态做操作，使用
useEffect
理解useState的异步本质有助于避免常见的 React 陷阱，写出更可靠的代码。
