Hook规则

# 04. Hook规则

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

# 只在最顶层使用 Hook

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

提示

React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序
如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

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

1
2
3
4
5
6

# 只在 React 函数中调用 Hook

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

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

# ESLint 插件

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

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

// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

上次更新: 2024/11/01, 10:54:11

← 使用Effect Hook 自定义 Hook→