### 彪哥

爱好前端

- 核心概念

- 高级指引

- Hook

  - Hook概述
  - 使用State Hook
  - 使用Effect Hook
  - Hook规则
    - 只在最顶层使用 Hook
    - 只在 React 函数中调用 Hook
    - ESLint 插件
  - 自定义 Hook

- 案例演示

- 《React》笔记
- Hook

heBody
2021-04-06
目录

# Hook规则

# # 04. Hook规则

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

## # 只在最顶层使用 Hook

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

提示

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

2. 如果我们想要有条件地执行一个 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

1

    // 你的 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
编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
使用Effect Hook
自定义 Hook

← 使用Effect Hook 自定义 Hook→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式