React 18 （核心）新特性

自动批处理机制

什么是批处理？

批处理就是将多个状态更新操作收集起来，合并到一次重新渲染中执行的优化机制。

批处理的核心价值：

• 性能优化：减少不必要的重新渲染。
• 用户体验：避免界面闪烁和卡顿。
• 节约资源；降低 cpu 计算开销。

React 17 及之前的批处理

// ✅ React 事件处理器内部
function handleClick() {
  setCount((c) => c + 1)
  setFlag((f) => !f)
  // 只会渲染一次
}

// ❌ setTimeout 回调
setTimeout(() => {
  setCount((c) => c + 1) // 触发第一次渲染
  setFlag((f) => !f) // 触发第二次渲染
}, 1000)

// ❌ Promise 回调
Promise.resolve().then(() => {
  setCount((c) => c + 1) // 触发第一次渲染
  setFlag((f) => !f) // 触发第二次渲染
})

// ❌ 原生事件处理器
document.getElementById('btn').addEventListener('click', () => {
  setCount((c) => c + 1) // 触发第一次渲染
  setFlag((f) => !f) // 触发第二次渲染
})

在 React 18 以后，自动批处理全场景覆盖：

• React 事件处理器
• setTimeout 回调
• Promise 回调
• 原生事件处理器
• 任何异步操作

特殊情况：flushSync

有时候确实需要 立即同步 执行状态更新，React 18 提供了 flushSync API：

import { flushSync } from 'react-dom'

function handleClick() {
  flushSync(() => {
    setCount((c) => c + 1) // 触发第一次渲染
  })
  // 此时 DOM 已经更新完成

  // 可以安全地读取 DOM 或与第三方库交互
  const element = document.getElementById('counter')
  console.log('Current count:', element.textContent) // 显示最新的值
}

flushSync 一定要谨慎使用！