useState 是同步还是异步？

这是一个经常被问到的问题。简单来说：useState 本身是同步的，但状态更新是异步的。让我详细解释一下这个看似矛盾的说法。

useState 的同步特性

useState 函数本身是同步执行的，它会立即返回当前状态值和更新函数：

const [count, setCount] = useState(0)
// useState(0) 立即执行，同步返回 [0, setCount]

状态更新的异步特性

但是，当你调用 setCount 更新状态时，React 会将这个更新操作放入队列中，并在适当的时机批量处理：

function Counter() {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    console.log('点击前的 count:', count) // 0
    setCount(count + 1)
    console.log('点击后的 count:', count) // 仍然是 0！
    // 为什么是0? 因为在同一个函数执行期间，count 的值是旧值，而不是更新后的值，只有再一次触发函数，才会获取到更新后的值
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  )
}

为什么状态更新是异步的？

React 将状态更新设计为异步主要有以下几个原因：

1. 性能优化

React 会批量处理多个状态更新，避免不必要的重新渲染：

function BatchUpdateExample() {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    // 这三个更新会被批量处理，只触发一次重新渲染
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    // 最终 count 只会增加 1，而不是 3
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>批量更新</button>
    </div>
  )
}

2. 事件循环的一致性

确保在同一个事件循环中的所有状态更新都能被正确处理。

如何获取最新的状态值？

1. 使用函数式更新

function Counter() {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    // 使用函数式更新，可以访问到最新的状态值
    setCount((prevCount) => prevCount + 1)
    setCount((prevCount) => prevCount + 1)
    setCount((prevCount) => prevCount + 1)
    // 现在 count 会正确增加 3
    // 为什么是3? 因为函数式更新是异步的，所以会先执行完函数式更新，再执行 setCount，所以 count 会正确增加 3
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>正确更新</button>
    </div>
  )
}

2. 使用 useEffect 监听状态变化

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('count 更新为:', count)
  }, [count])

  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>更新</button>
    </div>
  )
}

实际项目中的示例

让我们看看项目中的 CodeRunner 组件是如何使用 useState 的：

export default function CodeRunner({ code }: CodeRunnerProps) {
  const [output, setOutput] = useState<string>('')
  const [error, setError] = useState<string>('')
  const [consoleOutput, setConsoleOutput] = useState<string[]>([])

  const runCode = () => {
    try {
      // 这些状态更新会被批量处理
      setError('')
      setOutput('')
      setConsoleOutput([])

      // ... 执行代码逻辑

      // 根据执行结果更新状态
      setConsoleOutput(logs)
      if (result !== undefined) {
        setOutput(JSON.stringify(result, null, 2))
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    }
  }
}

总结

useState 函数本身：同步执行，立即返回状态和更新函数
状态更新操作：异步执行，React 会批量处理多个更新
状态值读取：在同一个函数执行期间，读取到的总是当前渲染周期的状态值
最佳实践：使用函数式更新来确保基于最新状态进行更新

理解这个机制对于编写正确的 React 组件非常重要，特别是在处理复杂的状态逻辑时。

交互式演示

你可以使用下面的演示组件来亲自体验 useState 的同步和异步特性：

useState 同步/异步演示

当前 count 值: 0

执行日志：

点击按钮查看执行日志...

关键观察点：

• 在同一个函数中，setCount 后立即读取 count 仍然是旧值
• 批量更新只会触发一次重新渲染
• 函数式更新可以访问到最新的状态值
• useEffect 会在状态更新后执行

这个组件展示了：

同步更新时状态值不会立即改变
批量更新只会触发一次重新渲染
函数式更新可以访问到最新状态
useEffect 在状态更新后执行

# useState 是同步还是异步？