跳到主要内容

Hooks使用中的几个注意事项

面试速答​

  • 以下内容以 React 18 为准。
  • Hooks 真正常踩的坑，不在“会不会写”，而在：
    • 调用规则
    • 依赖管理
    • 闭包旧值
    • 副作用边界
    • 性能优化滥用

一、遵守调用规则​

必须记住两条：

  • 只在最顶层调用
  • 只在 React 组件或自定义 Hook 中调用

否则状态映射会错位。

二、依赖数组不要靠猜​

useEffect、useMemo、useCallback 最常见问题都是依赖写错：

  • 少写：闭包旧值、不同步
  • 多写：频繁重建、性能浪费

更稳的原则是先保证正确，再考虑减少依赖。

三、不要把 effect 当万能容器​

很多逻辑不该写进 useEffect：

  • 纯计算
  • 事件响应后的即时逻辑
  • 可以直接由 props/state 推导出的数据

effect 的职责是同步外部副作用。

四、分清 state 和 ref​

  • 会驱动界面变化的数据，用 state
  • 只想跨 render 保存但不触发渲染的数据，用 ref

两者混用会让组件行为很难推断。

五、谨慎使用记忆化​

useMemo 和 useCallback 不是默认配置，滥用会让代码：

  • 更难读
  • 依赖更难维护
  • 收益却很小

六、正确面对 React 18 的 StrictMode​

开发环境里 effect 多执行一轮，通常是在帮你暴露：

  • cleanup 不完整
  • 副作用不幂等
  • 请求重复触发

不要第一反应就是“把 StrictMode 关掉”。

标准答法​

问：Hooks 使用中最重要的注意事项有哪些？​

答：要遵守调用规则；依赖数组优先保证正确；effect 只做副作用同步；分清 state 和 ref；记忆化只在必要时用；同时要理解 React 18 开发环境的 StrictMode 行为。

易错点​

  • 用条件判断包 Hook。
  • useEffect 里既推导状态又做请求又绑事件。
  • 用 ref 存 UI 状态，或者用 state 存不该触发渲染的值。

速记要点​

  • Hooks 难点在规则和边界，不在 API 名字。
  • 先保证正确，再谈优化。
  • effect 是副作用同步，不是逻辑垃圾桶。