React State 与事件

React State 与事件

前置：React 组件与 Props

目标：用 useState 做交互；理解「事件 → 更新 state → 重渲染」。

动手

完整代码：react2/03-state-events/demo

cd react2/03-state-events/demo
npm install
npm run dev

---

流程

1. 用户点击 / 输入
2. 事件处理函数调用 setXxx
3. React 用新 state 重新执行组件函数
4. 屏幕更新

const [count, setCount] = useState(0)

<button onClick={() => setCount((c) => c + 1)}>+1</button>

输入框用受控组件 ：value 绑 state，onChange 写回 state。

---

运行截图

---

坑

做法	为什么不好
count++ 直接改	state 必须不可变更新，用 setCount
setCount(count + 1) 连点多次	可能读到旧值；优先 setCount(c => c + 1)

下一篇

列表与表单