React Hooks规则
学习Hooks规则 · 难度：进阶 · +15XP
React Hooks 使用规则
Hooks让函数组件拥有状态和生命周期能力，但必须遵守两条核心规则。
规则1：只在顶层调用
不要在循环、条件或嵌套函数中调用Hook。
// ✅ 正确
function Comp(){const[c,setC]=useState(0);useEffect(()=>{},[])}
// ❌ 错误
function Comp(){if(condition){useState(0)} // Hook不能在条件中}规则2：只在React函数中调用
只在函数组件或自定义Hook中调用Hook，不要在普通JS函数中调用。
常用Hooks速查
| Hook | 用途 |
|---|---|
useState | 状态管理 |
useEffect | 副作用（API调用/订阅） |
useContext | 读取Context |
useRef | DOM引用/可变值 |
useMemo | 缓存计算结果 |
useCallback | 缓存函数引用 |
???? 练习
- 创建符合Hook规则的自定义Hook
- 用useRef获取输入框焦点