状态响应

React 的核心是：UI 是状态的函数。当状态（State）变化时，React 会重新计算应该显示什么，并把差异更新到页面上。这就是“响应式”的含义。

你将学到

“状态响应”到底在说什么
为什么普通变量不会更新 UI
如何用 useState 驱动 UI
什么时候该用 State、什么时候不该用

最小例子：点一次就更新一次

TypeScript

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数：{count}
    </button>
  );
}

点击按钮时，我们调用了 setCount。这会告诉 React：

State 变了
请重新运行组件函数，计算新的 UI
把变化“提交”到真实 DOM 上

为什么普通变量不行？

下面这段代码看起来也在“加一”，但页面不会变：

TypeScript

let count = 0;

export default function Counter() {
  function handleClick() {
    count = count + 1;
  }

  return (
    <button onClick={handleClick}>
      点击次数：{count}
    </button>
  );
}

关键原因

组件函数每次渲染都会重新执行，普通变量不在 React 的“记忆”里。
你改变了变量，但没有告诉 React 需要重新渲染。

常见用法：受控输入框

输入框的内容也可以用 State 驱动。这就是“受控组件”。

TypeScript

import { useState } from 'react';

export default function NameInput() {
  const [name, setName] = useState('');

  return (
    <label>
      你的名字：
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>你好，{name || '陌生人'}！</p>
    </label>
  );
}

判断是否该用 State

如果数据变化需要反映到 UI（文本、样式、是否显示、按钮是否可点），通常就该用 State。
如果数据只是临时的、不影响渲染（例如定时器 id、DOM 引用），更适合用 Ref（见使用 Ref 引用值）。

下一步

想理解“为什么 React 需要保持纯粹、渲染可能会重复发生”，看渲染和提交。
想系统学习 State 的定义与更新策略，看 State 与 State 更新。

动手练习

运行并修改下面的组件，熟悉交互式示例的编辑与预览。

🌐浏览器运行

保持组件纯粹

渲染和提交