React state：把计数器真正看懂 · 第 1 / 3 节

第 01 节：屏幕为什么会记住数字

本节目标：

说清普通变量和 React state 的差别。

预测一次点击后屏幕会显示什么。

用小表追踪 count 从初始值到下一次显示。

先修：能读 count + 1 这样的表达式｜下一节 02 >>

你看到的是屏幕，React 看到的是下一次渲染

按钮上的数字会变，不是因为 HTML 自己记住了数字。 React 文档把这种组件自己的“记忆”叫 state：组件需要根据交互记住当前输入、当前图片、购物车等值时，就用 state¹。

先别急着背 useState。先抓住一个现象：用户点击按钮，组件需要告诉 React“下一次请用新数字重新显示”。 state 的值不是你随便改一个普通变量就会自动出现在屏幕上。

讲解

普通 JavaScript 变量可以变，但 React 不会因为你改了一个局部变量就重新渲染。useState 给组件一个 state 变量和一个 setter;setter 是你请求 React 安排下一次显示的入口²。

JSX

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

这行可以先读成：当前显示用 count，想让下一次显示变化就调用 setCount。这比“count 是个变量”更准确，因为屏幕显示和下一次渲染之间隔着 React。

猜屏幕数字

这个最小计数器第一次渲染时按钮上显示什么？只写屏幕上的数字。

这里检查你是否把 useState(0) 的初始值和屏幕第一次显示连起来。

JSX

function Counter() {
  const [count, setCount] = useState(0);
  return <button>{count}</button>;
}

My prediction

跟我做一遍

看这个点击处理：

JSX

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

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

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

第一次显示是 0 。点击一次时，事件处理函数里读到当前这次渲染的 count，也就是 0，于是请求下一次显示 1 。下一次 React 重新显示组件时，按钮上就是 1 。

换你补全

把这张表补完：

走一次点击

按表格追踪点击一次后，本次渲染读到的 count 和下一次屏幕显示。

这里检查你是否能区分本次事件里读到的值和下一次渲染显示的值。

JSX

const [count, setCount] = useState(0);
function addOne() {
  setCount(count + 1);
}

Step	时刻	值
第一次显示	第一次显示	0
点击时读到 count
下一次显示

答案：点击时读到 0，下一次显示 1。这一步看懂后，第二节才谈“连续两次更新”为什么容易出错。

小结 + 通向下一节

state 是组件的记忆，setter 是请求下一次显示的入口。下一节看一个更真实的坑：连续调用两次 setter，为什么不一定得到你以为的 +2。

React Learn: State as a Component's Memory — https://react.dev/learn/state-a-components-memory ↩
React Reference: useState — https://react.dev/reference/react/useState ↩

Exercises

Exercise 1 · Level 1

用三句话解释 count 和 setCount 的分工。

Done criteria · checked locally

第一句说明 `count` 是当前显示用的 state 值。第二句说明 `setCount` 请求下一次显示变化。第三句说明普通局部变量变化不会自动让 React 重新显示。

Exercise 2 · Level 2

写一个只有按钮文字的计数器伪代码，不要求能运行。