react/rules-of-hooks Pedantic
它的作用
强制执行 Hooks 规则，确保 React Hooks 只在有效上下文中并且以正确的顺序被调用。
为什么这不好？
React Hooks 必须遵循特定规则，才能确保它们正常工作：
- 只在顶层调用 Hooks（绝不要在循环、条件语句 或嵌套函数中调用）
- 只从 React 函数组件或自定义 Hooks 中调用 Hooks
- 每次组件渲染时，Hooks 都必须以相同的顺序被调用
违反这些规则可能会导致状态损坏，或者组件行为变得不可预测。
示例
以下是此规则的错误代码示例：
javascript
// 不要在循环、条件语句或嵌套函数中调用 Hooks
function BadComponent() {
if (condition) {
const [state, setState] = useState(); // ❌ 条件中的 Hook
}
for (let i = 0; i < 10; i++) {
useEffect(() => {}); // ❌ 循环中的 Hook
}
}
// 不要从普通 JavaScript 函数中调用 Hooks
function regularFunction() {
const [state, setState] = useState(); // ❌ 普通函数中的 Hook
}以下是此规则的正确代码示例：
javascript
// ✅ 在 React 组件的顶层调用 Hooks
function GoodComponent() {
const [state, setState] = useState();
useEffect(() => {
// 此处为副作用逻辑
});
return <div>{state}</div>;
}
// ✅ 从自定义 Hooks 中调用 Hooks
function useCustomHook() {
const [state, setState] = useState();
return state;
}如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/rules-of-hooks": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/rules-of-hooks": "error",
},
});bash
oxlint --deny react/rules-of-hooks --react-plugin版本
此规则在 v0.3.3 中添加。