企业官网建设流程全解析

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); // 立即获取更新后的值

总结

最佳实践：

1. 永远不要依赖更新后的状态值（除非在useEffect中）

2. 使用函数式更新：setState(prev => prev + 1)

3. 如果需要基于更新后的状态做操作，使用useEffect

理解useState的异步本质有助于避免常见的 React 陷阱，写出更可靠的代码。