使用useState而非普通变量的意义是什么？

你觉得两者“效果一样”大概率是只做了简单的赋值操作，但在React的组件生命周期和UI更新逻辑里，它们的行为天差地别，核心区别主要有这几点：

1. 是否触发组件重渲染 #

普通变量的变更不会触发React组件的重渲染，就算你手动改了变量值，UI也不会同步更新；而useState返回的状态变更函数（比如setCount）会通知React状态已更新，触发组件重新渲染，进而更新对应的UI。

举个直观的例子：

// 普通变量：点击按钮后数值变了，但UI不更新
function Counter() {
  let count = 0;
  const handleClick = () => {
    count += 1;
    console.log(count); // 控制台会打印1、2、3...但页面上的数字不会变
  };
  return <button onClick={handleClick}>点击次数：{count}</button>;
}

// useState：点击后UI实时更新
function CounterWithState() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return <button onClick={handleClick}>点击次数：{count}</button>;
}

2. 状态是否在重渲染中持久化 #

组件每次重渲染时，普通变量会被重新初始化；但useState的状态会被React“记住”，在组件的整个生命周期里保持持久化，不会因为重渲染被重置。

比如组件因父组件更新而触发重渲染：

function Parent() {
  const [parentState, setParentState] = useState(0);
  return (
    <>
      <button onClick={() => setParentState(parentState + 1)}>父组件触发重渲染</button>
      <Child />
    </>
  );
}

// 普通变量：父组件每次触发重渲染，childCount都会被重置为0
function Child() {
  let childCount = 0;
  const handleClick = () => {
    childCount += 1;
    console.log(childCount);
  };
  return <button onClick={handleClick}>子组件点击：{childCount}</button>;
}

// useState：父组件重渲染后，childCount依然保留之前的数值
function ChildWithState() {
  const [childCount, setChildCount] = useState(0);
  const handleClick = () => {
    setChildCount(childCount + 1);
  };
  return <button onClick={handleClick}>子组件点击：{childCount}</button>;
}

3. 更新的异步与批量特性 #

useState的状态更新是异步且批量的，React会在合适的时机合并状态更新，避免不必要的重渲染；而普通变量的赋值是同步的，一旦赋值就立即生效。

比如在同一个事件里多次更新状态：

function BatchUpdateDemo() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    // 三次setCount只会触发一次重渲染，最终count变成3
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    
    // 普通变量会立即同步更新
    let tempCount = 0;
    tempCount += 1;
    tempCount += 1;
    tempCount += 1;
    console.log(tempCount); // 立即打印3
  };
  return <button onClick={handleClick}>count: {count}</button>;
}

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