在 React 中，为什么使用 useState 更新状态后，DOM 并没有立即更新？

在 React 中，为什么使用 useState 更新状态后，DOM 并没有立即更新？

回答：
因为在 React 中，useState 的状态更新是异步的，并且 React 会将多个状态更新进行批处理（batching）以提升性能。调用 setXXX 后，状态并不会立刻反映在当前组件的 state 中，也不会立即触发 DOM 重渲染；React 会在合适的时机（例如事件处理函数执行完毕后）批量处理状态更新并触发一次协调（reconciliation）和渲染。

解析：
React 的状态更新机制设计为“异步批处理”，这意味着：

1. 异步更新：调用 setState 或 useState 返回的 setter 函数时，React 不会立即修改状态，而是将更新请求放入一个队列中。
2. 批处理优化：在同一事件处理函数中多次调用 setter，React 会将它们合并为一次更新，避免多次不必要的重渲染。
3. 无法在更新后立即读取新状态：例如以下代码：

   const [count, setCount] = useState(0);
   const handleClick = () => {
     setCount(count + 1);
     console.log(count); // 仍输出旧值
   };
   

   此时 count 仍然是更新前的值。

如果需要在状态更新后执行某些操作，应使用 useEffect：

useEffect(() => {
  console.log('Count updated:', count);
}, [count]);

注意：在 React 18 及以后版本中，即使在 Promise、setTimeout 或原生事件监听器中，React 默认也会进行自动批处理（automatic batching），进一步统一了行为。