⚛️
React Hooks 速查
React 常用 Hooks 速查表。
本地处理 · 不上传
加载工具中…
相关：react · hooks · usestate · 前端
React Hooks 速查列出内置 Hook 的作用、参数与使用规则，并标注常见的误用。Hooks 的规则不能违反，否则行为不可预期。
使用步骤
- 先确定要管理状态、副作用还是性能优化
- 找到对应的 Hook 与它的调用签名
- 注意依赖数组要如实填写，别为了省事留空
- Hook 只能在组件顶层调用，不能放进条件或循环
使用场景
- 查找合适的 Hook
- 理解依赖数组的作用
- 排查渲染与副作用问题
- 学习 Hooks 的正确用法
小贴士
- Hook 只能在组件顶层调用，不能放在条件、循环或嵌套函数中。React 依靠调用顺序来匹配状态，顺序变了就会错乱。
- useEffect 的依赖数组不完整是最常见的 bug 来源，会导致读到过期的闭包变量。启用相关的 ESLint 规则能自动发现这类问题。
- useMemo 与 useCallback 本身也有开销，不该无脑加。它们适用于确实昂贵的计算或需要引用稳定的场景。
常见问题
为什么 Hook 不能写在 if 里？
React 依靠 Hook 的调用顺序来关联每次渲染的状态。条件调用会让顺序在不同渲染间变化，导致状态错位。这就是「Hook 规则」存在的原因，ESLint 插件会强制检查。
依赖数组该写什么？
effect 中用到的所有外部变量。漏写会导致读到过期的值（闭包陷阱），多写会导致不必要的重复执行。启用 exhaustive-deps 规则让工具帮你检查，比人工判断可靠。
要不要到处用 useMemo？
不要。它自身有记忆和比较的开销，对廉价计算是净损失。只在计算确实昂贵、或需要保持引用稳定以避免子组件重渲染时使用。
React Hooks 速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用React Hooks 速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。