简介

ESLint 与 Hooks

如果我们要在应用中使用 Hooks，就必须遵守一些规则，以避免出现意外的错误或异常行为。ESLint 及由 React 团队开发的 eslint-plugin-react-hooks 插件可以帮助我们遵循这些规则，并在可能违反规则时给出提示。我们强烈建议使用 ESLint，如果你尚未使用，请尽快引入。

要安装该插件，可以在命令行执行以下命令：

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

或者使用 Yarn：

1yarn add --dev eslint-plugin-react-hooks

此外，还需要修改 .eslintrc 文件，如下所示：

1{
2  "plugins": [
3    // ...
4    "react-hooks"
5  ],
6  "rules": {
7    // ...
8    "react-hooks/rules-of-hooks": "error",
9    "react-hooks/exhaustive-deps": "warn"
10  }
11}

注意：如果你正在使用 Create React App，有个好消息！你无需手动执行上述步骤，因为这两条特定规则已经默认集成在 Create React App 中。

Hooks 的规则

我们讨论了使用 Hooks 的规范以及如何检查是否违反预设规则。那么，这些规则具体是什么呢？让我们逐一了解。

只能在 React 函数中调用 Hooks

Hooks 只能在 React 的 函数组件 中调用，不能在 类组件 或其他任何地方使用。这意味着，任何使用 Hooks 的函数都必须是一个 React 组件，或者始终具有返回值（如 JSX、数组、字符串或 null）。

以下写法是不允许的，因为它在 类组件 中使用了 Hooks：

1class MyComponent extends React.Component {
2  render() {
3    const [value, setValue] = React.useState();
4    return (
5      <div>
6        <div> 值：{value} </div>
7        <input type="text" onChange={(e) => setValue(e.target.value)} />
8      </div>
9    );
10  }
11}

React 编译器会正确抛出如下错误：

然而，以下代码是允许的，因为它使用的是 函数组件：

只能在顶层调用 Hooks

不能在 循环、条件语句 或 嵌套函数 内部调用 Hooks。你可能会好奇原因。这与 React 内部处理 Hooks 的机制有关：每次组件重新渲染时，Hooks 的执行顺序必须保持一致。因此，不能在条件中调用 Hook —— 否则会导致执行顺序发生变化。但请注意，我们可以在 Hook 内部 使用条件！

以下写法是不允许的，因为 Hook 被用在了条件语句中：

1if (title) {
2  useEffect(() => {
3    document.title = title;
4  }, [title]);
5}

编译器同样会报错：

而以下写法是允许的，因为条件被放在了 Hook 内部：

如果你已按照上述方式安装并配置了 ESLint 插件，当违反任一规则时，ESLint 将会给出警告提示。