Hook规则

[krislee94]

Hook本质就是JavaScript函数，但是在使用它时需要遵循两条规则。可以使用插件linter来强制执行这些规则。

只在最顶层使用Hook

• 不要在循环，条件或则嵌套函数中调用Hook。（确保总是在你的React函数的最顶层调用他们。）

只在React函数中调用Hook

• 不要在普通的JavaScript函数中调用Hook
• 你可以在React函数组件中调用Hook
• 在自定义Hook中调用其他Hook

遵守此规则，确保组件的状态逻辑在代码中清晰可见。

ESLint插件

npm install eslint-plugin-react-hooks --save-dev

// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}