钩子的规则

钩子是使用 JavaScript 函数定义的，但它们代表一种特殊类型的可重用 UI 逻辑，并且对调用位置有限制。

¥Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.

只在顶层调用钩子

¥Only call Hooks at the top level

名称以 use 开头的函数在 React 中称为钩子。

¥Functions whose names start with use are called Hooks in React.

不要在循环、条件、嵌套函数或 try/catch/finally 块内调用 Hook。相反，在任何早期返回之前，始终在 React 函数的顶层使用钩子。你只能在 React 渲染函数组件时调用钩子：

¥Don’t call Hooks inside loops, conditions, nested functions, or try/catch/finally blocks. Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:

✅ 称它们为功能组件体内的顶层。

¥✅ Call them at the top level in the body of a function component.
✅ 称它们为自定义钩子体内的顶层。

¥✅ Call them at the top level in the body of a custom Hook.

function Counter() {
  // ✅ Good: top-level in a function component
  const [count, setCount] = useState(0);
  // ...
}

function useWindowWidth() {
  // ✅ Good: top-level in a custom Hook
  const [width, setWidth] = useState(window.innerWidth);
  // ...
}

其他情况不支持调用钩子（以 use 开头的函数），例如：

¥It’s not supported to call Hooks (functions starting with use) in any other cases, for example:

🔴 不要在条件或循环内调用 Hook。

¥🔴 Do not call Hooks inside conditions or loops.
🔴 不要在条件 return 语句之后调用钩子。

¥🔴 Do not call Hooks after a conditional return statement.
🔴 不要在事件处理程序中调用钩子。

¥🔴 Do not call Hooks in event handlers.
🔴 不要在类组件中调用钩子。

¥🔴 Do not call Hooks in class components.
🔴 不要在传递给 useMemo、useReducer 或 useEffect 的函数内调用 Hook。

¥🔴 Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.
🔴 不要在 try/catch/finally 块内调用 Hook。

¥🔴 Do not call Hooks inside try/catch/finally blocks.

如果你违反这些规则，你可能会看到此错误。

¥If you break these rules, you might see this error.

function Bad({ cond }) {
  if (cond) {
    // 🔴 Bad: inside a condition (to fix, move it outside!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  for (let i = 0; i < 10; i++) {
    // 🔴 Bad: inside a loop (to fix, move it outside!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad({ cond }) {
  if (cond) {
    return;
  }
  // 🔴 Bad: after a conditional return (to fix, move it before the return!)
  const theme = useContext(ThemeContext);
  // ...
}

function Bad() {
  function handleClick() {
    // 🔴 Bad: inside an event handler (to fix, move it outside!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  const style = useMemo(() => {
    // 🔴 Bad: inside useMemo (to fix, move it outside!)
    const theme = useContext(ThemeContext);
    return createStyle(theme);
  });
  // ...
}

class Bad extends React.Component {
  render() {
    // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
    useEffect(() => {})
    // ...
  }
}

function Bad() {
  try {
    // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
    const [x, setX] = useState(0);
  } catch {
    const [x, setX] = useState(1);
  }
}

你可以使用 eslint-plugin-react-hooks 插件来捕获这些错误。

¥You can use the eslint-plugin-react-hooks plugin to catch these mistakes.

注意

定制钩子可能会调用其他 Hook（这就是它们的全部目的）。这是有效的，因为自定义钩子也应该只在函数组件渲染时被调用。

¥Custom Hooks may call other Hooks (that’s their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.

仅从 React 函数调用钩子

¥Only call Hooks from React functions

不要从常规 JavaScript 函数中调用 Hook。相反，你可以：

¥Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ 从 React 函数组件调用钩子。✅ 从自定义钩子调用钩子。

¥✅ Call Hooks from React function components. ✅ Call Hooks from custom Hooks.

通过遵循此规则，你可以确保组件中的所有状态逻辑从其源代码中清晰可见。

¥By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

function FriendList() {
  const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
}

function setOnlineStatus() { // ❌ Not a component or custom Hook!
  const [onlineStatus, setOnlineStatus] = useOnlineStatus();
}

上一章React 调用组件和钩子