一个插件开启Hooks 代码的自动错误提醒

使用 Hooks 的一些特性和要遵循的规则，那么应用到日常的开发中，就必须时刻注意不能写错。

包括这么三点：

• 在 useEffect 的回调函数中使用的变量，都必须在依赖项中声明；
• Hooks 不能出现在条件语句或者循环中，也不能出现在 return 之后；
• Hooks 只能在函数组件或者自定义 Hooks 中使用。

React 官方为我们提供了一个 ESLint 的插件，专门用来检查 Hooks 是否正确被使用，它就是 eslint-plugin-react-hooks 。通过这个插件，如果发现缺少依赖项定义这样违反规则的情况，就会报一个错误提示（类似于语法错误的提示），方便进行修改，从而避免 Hooks 的错误使用。

使用步骤

1. 安装这个插件：npm install eslint-plugin-react-hooks -D

2. 修改：ESLint 配置文件。

   加入两个规则：rules-of-hooks 和 exhaustive-deps。如下：

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    // 检查 Hooks 的使用规则
    "react-hooks/rules-of-hooks": "error", 
    // 检查依赖项的声明
    "react-hooks/exhaustive-deps": "warn"
  }
}