React 的 12 条基本 ESLint 规则

ESLint 有一套全面的 JavaScript 代码规则，涵盖风格选择并防止常见错误。单独使用 ESLint 可以提升你的项目，但是有一些 ESLint 插件可用于添加特定于 React 的规则，这将帮助你编写可靠的 React 应用程序。

在这篇文章中，我们将讨论这些 ESLint 规则和插件，包括它们适用于 Hooks 的情况。这里有一些快速链接供您跳转：

• React Hooks 规则 ( eslint-plugin-react-hooks)

  • react-hooks/rules-of-hooks

  • react-hooks/exhaustive-deps

• 反应规则 ( eslint-plugin-react)

  • react/button-has-type

  • react/prop-types

  • react/require-default-props

  • react/no-array-index-key

  • react/react-in-jsx-scope

  • react/jsx-uses-react

  • react/display-name

  • react/no-danger-with-children

  • react/jsx-no-bind

React Hooks 规则 ( eslint-plugin-react-hooks)

这个插件只包含两个规则，但它们对于避免使用 Hooks编写函数组件时的常见陷阱至关重要。

反应钩子/钩子规则

此规则强制组件在使用 Hooks 时遵循Hooks 规则。这些规则在React 文档中有详细讨论，但是在使用 Hooks 时必须遵循两个规则：

1. 钩子只能从组件的顶级代码中调用。这真正意味着 Hooks 不应该被有条件地调用——它们应该在每次渲染时以相同的顺序被调用，以避免问题和细微的错误

2. 只能从函数组件或另一个 Hook 调用 Hook

   1. 自定义 Hooks 通常将来自内置的甚至其他自定义 Hooks 的行为组合在一起

在默认配置中，违反此规则将导致错误，导致 lint 检查失败。

反应钩子/详尽的deps

此规则强制执行有关传递给 Hooks 的依赖数组内容的某些规则，例如useEffect、useCallback和useMemo。一般来说，效果、回调或记忆值计算中引用的任何值都必须包含在依赖数组中。如果未正确完成，可能会导致状态数据过时或无限渲染循环等问题。

这条规则善于发现潜在的依赖相关的 bug，但也有一些限制：

• 此规则不会检查具有依赖关系数组的自定义 Hook。它仅适用于内置 Hooks

• 只有当它是一个静态值数组时，该规则才能正确检查依赖关系。如果使用了对另一个数组的引用，或