计数器是观察 React 更新流程的小练习。组件第一次渲染时创建 state,用户点击按钮后更新 state,React 再根据新值刷新界面。
声明和更新状态
const [count, setCount] = useState(0)
function increase() {
setCount((current) => current + 1)
}
当新值依赖旧值时,使用函数形式的更新更清楚,也能避免连续更新时读取到旧值。
让操作有清楚的反馈
按钮文案应描述操作,计数值可以用文本展示。重置按钮则把状态恢复到初始值:setCount(0)。
这个练习也适合检查按钮的键盘操作、焦点样式和窄屏下的间距,不只是确认数字会变化。