React Hooks 对比演示台
交互式演示 React 核心 Hooks 的工作原理与效果 — 点击标签切换
useState
管理组件内部状态。演示计数器、批量更新与函数式更新，以及状态历史记录。
计数器 基础
0
useEffect
副作用处理——数据获取模拟与订阅清理。观察依赖变化触发的副作用执行和清理流程。
订阅清理演示
模拟 WebSocket 订阅：切换下方开关观察订阅/取消订阅日志
订阅状态：
已连接
useRef
DOM 引用与可变值存储。演示自动聚焦、渲染次数追踪，以及与 useState 的对比。
渲染次数追踪 useRef vs useState
说明：useRef 变更不触发渲染，useState 每次更新都会触发重新渲染。
useMemo
记忆化计算优化。对比有/无 useMemo 的大列表过滤性能差异。
useCallback
函数记忆化与子组件重新渲染可视化。对比有/无 useCallback 时子组件的渲染行为。
子组件渲染可视化
点击"更新计数"触发父组件重新渲染，观察子组件是否重新渲染。
✓ 优化子组件（useCallback）
渲染次数: 0
✕ 未优化子组件（新函数）
渲染次数: 0
这些是模拟 React Hooks 行为的概念演示，用于教学目的。