使用 ESLint 插件帮助检查 Hooks 的使用
使用 Hooks 的一些特性和要遵循的规则,在应用到日常的开发中,就必须时刻注意不能写错。
包括这么三点:
在 useEffect 的回调函数中使用的变量,都必须在依赖项中声明;
Hooks 不能出现在条件语句或者循环中,也不能出现在 return 之后;
Hooks 只能在函数组件或者自定义 Hooks 中使用。
React 官方为我们提供了一个 ESLint 的插件,专门用来检查 Hooks 是否正确被使用,它就是 eslint-plugin-react-hooks 。通过这个插件,如果发现缺少依赖项定义这样违反规则的情况,就会报一个错误提示(类似于语法错误的提示),方便进行修改,从而避免 Hooks 的错误使用。
使用步骤
-
安装这个插件:npm install eslint-plugin-react-hooks --save-dev
-
修改:ESLint 配置文件。
加入两个规则:rules-of-hooks 和 exhaustive-deps。如下:
{ "plugins": [ // ... "react-hooks" ], "rules": { // ... // 检查 Hooks 的使用规则 "react-hooks/rules-of-hooks": "error", // 检查依赖项的声明 "react-hooks/exhaustive-deps": "warn" } }