模块二实验Hooks 状态闭包、自动批处理与性能优化
Hooks 深度工作坊实验
交互验证 useState 批处理、useMemo/useCallback 记忆化与 useReducer 集中状态流转。
🧪 实验一：useState 自动批处理 (Automatic Batching) 机制测试
点击按钮触发连续 3 次 setState：测试直接传值闭包捕获与函数式更新队列执行的差异。
直接传值:
setCount(count + 1) * 3当前数值: 0
原理：三次更新引用的是同一渲染帧中闭包锁定的固定变量 count。
函数式更新:
setCount(c => c + 1) * 3当前数值: 0
原理：状态更新加入微任务队列，每次计算入参为上一更新函数的返回值。
⚡ 实验二：useCallback 引用稳定性与子组件防重渲染
父组件状态变动时，若下发未包裹 useCallback 的内联函数，将导致 React.memo 浅比较失效。
子组件名称: 已启用 useCallback 保护
已重渲染次数 (Render Count): 0 次
🛒 实验三：useReducer 复杂领域状态树管理
通过 Action 与 Reducer 纯函数解耦业务变异，利用 useMemo 缓存总价计算。
React 18 核心源码电子书¥69 / 件
1
Web 性能调优实战教程¥99 / 件
1
购物车合计 (useMemo 自动重算):¥ 168