React state：把计数器真正看懂

这门课给会看一点 HTML/JavaScript、但不理解 React 按钮点击后为什么会重新显示数字的学习者。学完后，你能解释一个计数器的 state 从哪里来、什么时候更新、为什么连续更新要用函数式写法，以及在 Next.js 里为什么交互组件需要 Client Component 边界。

学习目标：

• 用自己的话解释 state 是组件用来记住屏幕状态的值。
• 预测一次按钮点击后显示的数字，不把普通变量和 React state 混成一件事。
• 修掉连续两次更新只加 1 的典型错法。
• 判断最小 Next.js 计数器为什么需要 "use client"。

先修： 会读非常简单的 JavaScript 函数；不要求懂 React、 Next.js、构建工具或终端命令。

练习环境： 你自己的编辑器或纸笔。本课互动块只做本地文本检查，不执行代码。

这门样例证明什么： 它展示 Agent Mentor 不只会生成讲解，也会把一个小概念拆成预测、追踪、修错和代码填空，并把每次卡点复制回 agent 继续追问。

课时表

来源见 sources.md。