Hook 是使用 JavaScript 函数定义的,但它们代表了一种特殊的可重用的 UI 逻辑,并且对它们可以被调用的位置有限制。
只在顶层调用 Hook
在 React 中,以 use
开头命名的函数被称为 Hook。
不要在循环、条件语句、嵌套函数或 try
/catch
/finally
代码块中调用 Hook。相反,你应该在 React 函数组件的顶层使用 Hook,且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hook:
- ✅ 在 函数组件主体 的顶层调用它们。
- ✅ 在 自定义 Hook 主体 的顶层调用它们。
function Counter() { // ✅ 正确的:在函数组件顶层 const [count, setCount] = useState(0); // ... } function useWindowWidth() { // ✅ 正确的:在自定义 Hooks 顶层 const [width, setWidth] = useState(window.innerWidth); // ... }
不支持在其他任何情况下调用以 use
开头的 Hook,例如:
- 🔴 不要在条件语句或循环中调用 Hook。
- 🔴 不要在条件性的
return
语句之后调用 Hook。 - 🔴 不要在事件处理函数中调用 Hook。
- 🔴 不要在类组件中调用 Hook。
- 🔴 不要在传递给
useMemo
、useReducer
或useEffect
的函数内部调用 Hook。 - 🔴 不要在
try
/catch
/finally
代码块中调用 Hook。
如果你违反了这些规则,你可能会看到以下错误:
function Bad({ cond }) { if (cond) { // 🔴 错误的:在条件语句内部(要修复这个问题,将其移到外部!) const theme = useContext(ThemeContext); } // ... } function Bad() { for (let i = 0; i < 10; i++) { // 🔴 错误的:在循环语句内部(要修复这个问题,将其移到外部!) const theme = useContext(ThemeContext); } // ... } function Bad({ cond }) { if (cond) { return; } // 🔴 错误的:在条件性 return 语句之后(要修复这个问题,将其移到 return 之前!) const theme = useContext(ThemeContext); // ... } function Bad() { function handleClick() { // 🔴 错误的:在事件处理函数内部(要修复这个问题,将其移到 return 之前!) const theme = useContext(ThemeContext); } // ... } function Bad() { const style = useMemo(() => { // 🔴 错误的:在 useMemo 内部调用(要修复这个问题,将其移到外部!) const theme = useContext(ThemeContext); return createStyle(theme); }); // ... } class Bad extends React.Component { render() { // 🔴 错误的:在类组件内部调用(要修复这个问题,改写为函数组件!) useEffect(() => {}) // ... } } function Bad() { try { // 🔴 错误的:在 try、catch、finally 代码块内部调用(要修复这个问题,将其移到外部!) const [x, setX] = useState(0); } catch { const [x, setX] = useState(1); } }
你可以使用 eslint-plugin-react-hooks
插件 来捕获这些错误。
仅在 React 函数中调用 Hook
不要在常规的 JavaScript 函数中调用 Hook。相反,你可以:
✅ 在 React 函数组件中调用 Hook。 ✅ 在 自定义 Hook 中调用 Hook。
遵循这条规则,你可以确保组件中的所有状态逻辑在其源代码中清晰可见。
function FriendList() { const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅ } function setOnlineStatus() { // ❌ Not a component or custom Hook! const [onlineStatus, setOnlineStatus] = useOnlineStatus(); }