04. Hook规则

Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件来强制执行这些规则：

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。

:::tip

  1. React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序

  2. 如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

1
2
3
4
5
6
useEffect(function persistForm() {
  // 👍 将条件判断放置在 effect 中
  if (name !== '') {
    localStorage.setItem('formData', name);
  }
});

:::

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。你可以：

  • ✅ 在 React 的函数组件中调用 Hook
  • ✅ 在自定义 Hook 中调用其他 Hook

ESLint 插件

我们发布了一个名为 eslint-plugin-react-hooks 的 ESLint 插件来强制执行这两条规则。

1
npm install eslint-plugin-react-hooks --save-dev
1
2
3
4
5
6
7
8
9
10
11
12
// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}