React中useState异步特性是什么意思？求示例解析

核心逻辑说明 #

React 把useState设计成异步，本质是为了批量合并状态更新来提升性能。当你调用setXxx修改状态时，React不会立刻改变状态值，而是把这次更新加入队列，等当前代码块的所有同步代码执行完毕后，再批量处理队列里的更新，触发组件重新渲染，这时候状态才会更新为新值。

典型错误示例（异步特性引发的bug） #

比如下面这个计数器，点击按钮期望让count加2，但实际只会加1：

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
    // 这里打印的还是旧值0，因为状态还没完成更新
    console.log('当前count值：', count);
    // 第二次更新依然用的是旧值0，所以最终count变成1，不是预期的2
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>点击加2</button>
    </div>
  );
}

问题根源：两次setCount调用时，count始终是更新前的0，React合并了两次相同的更新操作（都是0+1），最终只执行一次，所以页面上的count只会变成1。

正确处理方式：函数式更新 #

如果需要基于上一次的状态进行更新，要用setXxx的函数式写法，它会自动接收上一次的最新状态值：

const handleClick = () => {
  // 每次更新都基于前一次的真实状态值计算
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
};

这样点击按钮后，count会正确变成2，因为第二次更新是基于第一次更新后的1来计算的。

对比useRef的同步特性 #

useRef的current属性是同步更新的，修改后立刻就能拿到新值，但它不会触发组件重新渲染，适合需要实时获取值但不需要更新UI的场景：

import { useState, useRef } from 'react';

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

  const handleClick = () => {
    countRef.current += 1;
    console.log('实时count值：', countRef.current); // 立刻输出1
    countRef.current += 1;
    console.log('实时count值：', countRef.current); // 立刻输出2
    // 最后调用useState触发UI更新
    setCount(countRef.current);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>点击加2</button>
    </div>
  );
}

总结 #

• useState异步：通过批量更新优化性能，更新后不能立刻获取新值，连续更新要依赖函数式写法
• useRef同步：修改后立即获取新值，但不触发组件渲染，适合存储不需要驱动UI的变量

内容的提问来源于stack exchange，提问作者Josh Lee