渐进式编程课
React 目录
第 4 课2026.09.03

把上一课按钮点击变成页面上可见的练习次数。

第 4 课：useState保存交互状态

  • 日期：2026-09-03
  • 课程序号：第 4 课
  • 知识点：状态变量、setter 与函数式更新

用途

把上一课按钮点击变成页面上可见的练习次数。

核心概念

  • useState 必须在组件顶层调用；setter 请求下一次渲染，不能直接修改 count。
  • 新值依赖旧值时传入更新函数；函数应保持纯粹，不在其中弹窗或发请求。

最小代码或操作示例

jsx
import { useState } from "react";
export default function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>
    已练习 {count} 次
  </button>;
}

3～5 分钟练习

在同一个事件处理函数中连续调用两次 setCount(c => c + 1)，预测点击一次的变化。

参考答案

jsx
// 替换 onClick：
onClick={() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
}}
// 从 0 变为 2。更新函数按队列依次收到前一次的结果。

与上一课的联系

上一课将函数交给 onClick；本课让回调更新组件拥有的交互状态。在需要区分服务端/客户端组件的工程中，应放入客户端组件文件。

参考资料