State：组件的记忆

组件函数每次渲染都会重新执行。那 React 是怎么“记住”上一次的值的？答案是：State 属于 React， React 会在多次渲染之间保留它。

为什么 local 变量不会“记住”？

看起来能工作，但 UI 往往不会如你所愿：

TypeScript

let clicks = 0;

export default function BadCounter() {
  function handleClick() {
    clicks = clicks + 1;
  }

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

发生了什么

你修改了 clicks，但 React 不知道要重新渲染。
更重要的是：组件函数被再次调用时，变量的生命周期不受 React 管理，很容易出错。

State 才是 React 的“记忆”

TypeScript

import { useState } from 'react';

export default function GoodCounter() {
  const [clicks, setClicks] = useState(0);

  return (
    <>
      <button onClick={() => setClicks(clicks + 1)}>点我</button>
      <p>点击次数：{clicks}</p>
    </>
  );
}

当你调用 setClicks，React 会把新的值存起来，并安排一次重新渲染。下一次渲染时，useState 会返回“记住”的最新值。

State 是“快照”：为什么连点 3 次只加 1？

TypeScript

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return <button onClick={handleClick}>{count}</button>;
}

在一次渲染中，count 的值不会改变。你连续三次写 setCount(count + 1)，其实是在用同一个“快照”反复计算。

下一章会解决这个问题

继续阅读 State 更新，你会学到函数式更新与批处理，从而安全地做“基于前一个值”的更新。

下一步

想掌握对象/数组的更新方式，去 State 更新。
想知道什么是“渲染阶段可能重复”以及为什么要保持纯粹，去渲染和提交。

动手练习

补全状态与事件处理，让点击按钮能正确累加。

🌐浏览器运行

响应事件

State 更新