第 5 课：事件中的状态快照

日期：2026-09-04
课程序号：第 5 课
知识点：渲染快照与替换更新

用途

解释同一次点击连续两次设置为何只加一。

核心概念

事件处理器读取创建它的那次渲染值；setter 不会立即改变闭包内 count。

最小代码或操作示例

jsx

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

3～5 分钟练习

点击一次后把两次调用都改成 setCount(c => c + 1)，再次比较每次点击增量。

参考答案

原代码每次 +1，两次都是提交相同的新值；更新函数版本每次 +2。保持更新函数纯粹。

与上一课的联系

上一课学习函数式更新，本课通过替换更新的对照解释原因。沿用客户端组件入口。

参考资料

官方文档：事件中的状态快照（2026-09-04 核对；以文档标注版本及本机界面为准）。