React Hooks 学习笔记

记录我在学习 React Hooks 过程中的要点与踩过的坑。

useState：状态管理的基础

• 状态更新是异步的，多次更新会合并（批处理）
• 初始值支持函数形式（惰性初始化）：

const [count, setCount] = useState(() => expensiveInit())

useEffect：副作用

• 依赖数组为空 → 仅在挂载时执行
• 依赖数组省略 → 每次渲染都执行
• 清理函数在卸载或依赖变化前执行：

useEffect(() => {
  const timer = setInterval(tick, 1000)
  return () => clearInterval(timer) // 清理
}, [])

useMemo / useCallback：性能优化

• useMemo 缓存计算结果，useCallback 缓存函数引用
• 不要滥用：只有计算昂贵或作为子组件依赖时才需要

常见坑

1. 在 setState 中直接修改对象 → 引用不变导致不更新（要用不可变更新）
2. 依赖数组里漏掉变量 → 闭包陷阱（可用 ESLint 插件 react-hooks/exhaustive-deps 检查）
3. 在渲染期间直接调用 setState → 无限循环

参考

• React 官方文档