Hooks 规则

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

仅在顶层调用 Hooks
仅从 React 函数调用 Hooks

仅在顶层调用 Hooks

在 React 中，名称以 use 开头的函数被称为 Hooks。

不要在循环、条件语句、嵌套函数或 try/catch/finally 代码块中调用 Hooks。 相反，请始终在 React 函数的顶层，任何提前 return 语句之前使用 Hooks。您只能在 React 渲染函数组件时调用 Hooks

✅ 在函数组件函数体的顶层调用它们。
✅ 在自定义 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);
  // ...
}

在任何其他情况下调用 Hooks（以 use 开头的函数）是不支持的，例如

🔴 不要在条件语句或循环中调用 Hooks。
🔴 不要在条件 return 语句后调用 Hooks。
🔴 不要在事件处理程序中调用 Hooks。
🔴 不要在类组件中调用 Hooks。
🔴 不要在传递给 useMemo、useReducer 或 useEffect 的函数中调用 Hooks。
🔴 不要在 try/catch/finally 代码块中调用 Hooks。

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

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 插件来捕获这些错误。

注意

自定义 Hook 可以调用其他 Hook（这是它们的全部目的）。这是可行的，因为自定义 Hook 也应该只在函数组件渲染时调用。

仅从 React 函数调用 Hooks

不要从常规 JavaScript 函数调用 Hooks。相反，您可以

✅ 从 React 函数组件调用 Hooks。 ✅ 从自定义 Hook 调用 Hooks。

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

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

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

上一篇React 调用组件和 Hooks