React中的事件处理与状态更新
React 中用户事件、状态更新与界面重渲染之间的闭环关系。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: React MOC
- 相关概念: react-use-state, React组件渲染与重渲染, react-use-effect
React中的事件处理与状态更新
React 交互逻辑最经典的闭环是：用户操作触发事件，事件里更新状态，状态变化后驱动组件重新渲染。
为什么要单独理解这一层
因为很多人学 React 时只记住了 onClick 和 setState，却没有真正建立“事件逻辑”和“副作用逻辑”之间的边界。
React 交互的标准闭环
- 用户触发事件
- 事件处理函数执行
- 事件里调用状态更新函数
- React 重新执行组件并计算新的 UI
事件函数里适合放什么
- 直接响应当前用户操作的逻辑
- 状态更新
- 明确属于这次交互的同步处理
什么不该硬塞进事件函数
- 和当前交互无直接关系的长期同步逻辑
- 本该抽成独立状态组织或副作用同步的流程
和 useEffect 的边界
- 事件函数处理“这次用户做了什么”
useEffect处理“状态变化后如何与外部系统同步”
常见误区
- 把事件逻辑和副作用逻辑混在一起
- 认为调用状态更新函数后，马上就能按“新状态”思维写所有后续逻辑
- 对更新触发重渲染没有整体预期
最短记忆方式
React 交互先看事件，再看状态，再看渲染；不要一上来就把所有问题都塞进 effect。