React Hook介绍（三）: Hook必须遵守的两个规则

一、两个强制性规则：

  (一）只在最顶层使用 Hook

       记住别在循环，条件或嵌套函数中定义即可，因为hook它必须按顺序执行，它对state的控制才正确。

（二）只在 React 函数中调用 Hook：

      不要在普通的 JavaScript 函数中调用 Hook，即只能在React的函数组件中调用，另外也可以在自定义hook中调用其它的hook.

     

二、安装ESLink插件：

为了保证Hook开发中符合以上2个规则要求，可以在开发工具中安装： eslint-plugin-react-hooks 的 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 的依赖
  }
}