Hook是React提供的特殊函数，比如useState和useEffect，能让你在函数组件里使用状态与生命周期等特性。所谓Hook规则，就是React官方规定的、使用这些函数时必须遵守的约定，目的是保证组件状态在多次渲染之间正确对应。
什么是Hook规则
Hook规则是React对Hooks调用方式的两项强制约束。React内部靠每次渲染时调用Hook的顺序来记录状态，如果顺序变了，就会拿错之前的状态，导致界面异常。所以官方明确了以下基本规则：
- 只在最顶层调用Hook，不要在循环、条件判断或嵌套函数中调用。
- 只在React函数组件或自定义Hook中以小写use开头的函数里调用Hook。
Hook的具体限制
1. 不要在条件语句中使用Hook
下面这种写法是错误的，因为条件可能导致Hook不被执行，破坏调用顺序：
function BadExample({ isOn }) {
if (isOn) {
// 错误：在条件中调用Hook
const [count, setCount] = useState(0);
}
return null;
}
2. 不要在循环或嵌套函数里调用Hook
循环次数变化也会让顺序不稳，嵌套函数则可能根本不执行：
function BadLoop() {
for (let i = 0; i < 3; i++) {
// 错误：在循环中调用Hook
useState(i);
}
return null;
}
3. 只能在函数组件或自定义Hook中调用
普通JavaScript函数里调用Hook不会生效，也会报错：
function normalFunc() {
// 错误：不在组件或自定义Hook中
useState(0);
}
为什么会有这些限制
React在每次渲染时，按照Hooks的调用顺序把状态存进一个内部列表。如果顺序因条件或循环改变，第二次渲染拿到的状态就错位了。用eslint-plugin-react-hooks可以自动检查是否违反规则。
正确的自定义Hook示例
把Hook提取到以use开头的函数里，就是合法的自定义Hook：
import { useState, useEffect } from 'react';
function useOnline() {
const [online, setOnline] = useState(true);
useEffect(() => {
const handler = () => setOnline(navigator.onLine);
window.addEventListener('online', handler);
return () => window.removeEventListener('online', handler);
}, []);
return online;
}
小结
Hook规则本质是为了让React能靠稳定顺序管理状态。只要记住只在顶层、只在组件或use函数中调用，就能避开大部分Hooks相关错误。
ReactHookshook_rulesuse_stateuse_effect修改时间：2026-07-24 16:42:21