← Back to rules

react/规则-钩子 严谨

它的作用

强制执行钩子规则，确保 React 钩子仅在有效上下文中调用，并且按正确的顺序调用。

为什么这是不好的？

React 钩子必须遵循特定规则，以确保其正常工作：

1. 只能在顶层调用钩子（永远不要在循环、条件或嵌套函数中调用）
2. 只能从 React 函数组件或自定义钩子中调用钩子
3. 每次组件渲染时，钩子必须以相同的顺序被调用

违反这些规则可能导致状态损坏或组件行为变得不可预测的错误。

示例

此规则的 错误 代码示例：

// 不要在循环、条件或嵌套函数中调用钩子
function BadComponent() {
  if (condition) {
    const [state, setState] = useState(); // ❌ 条件中的钩子
  }

  for (let i = 0; i < 10; i++) {
    useEffect(() => {}); // ❌ 循环中的钩子
  }
}

// 不要从普通 JavaScript 函数中调用钩子
function regularFunction() {
  const [state, setState] = useState(); // ❌ 普通函数中的钩子
}

此规则的 正确 代码示例：

// ✅ 在 React 组件的顶层调用钩子
function GoodComponent() {
  const [state, setState] = useState();

  useEffect(() => {
    // 效果逻辑在此处
  });

  return <div>{state}</div>;
}

// ✅ 从自定义钩子中调用钩子
function useCustomHook() {
  const [state, setState] = useState();
  return state;
}

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/rules-of-hooks": "error"
  }
}

CLI

oxlint --deny react/rules-of-hooks --react-plugin

参考资料

• 规则源码