Wang's blog Wang's blog
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Wang Mings

跟随大神,成为大神!
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • CSS

  • Npm

  • Vue

  • HTML

  • Node

  • Yaml

  • React

    • ReactUI组件库
    • react实战技巧经验
    • react-pdf预览PDF文件
    • react常见的一些报错
    • Hook

      • Hook概述
      • Hook规则
        • 只在最顶层使用 Hook
        • 只在 React 函数中调用 Hook
        • ESLint 插件
      • 自定义Hook
      • 使用StateHook
      • 使用EffectHook(副作用钩子)
    • 核心概念

    • 案例演示

    • 高级指引

  • 框架

  • 规范

  • Electron

  • JS演示

  • VuePress

  • JavaScript

  • TypeScript

  • 微信小程序

  • TypeScript-axios

  • 前端
  • React
  • Hook
wangmings
2022-07-19
目录
只在最顶层使用 Hook
只在 React 函数中调用 Hook
ESLint 插件

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)
Hook概述
自定义Hook

← Hook概述 自定义Hook→

最近更新
01
theme-vdoing-blog博客静态编译问题
09-16
02
搜索引擎
07-19
03
友情链接
07-19
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
  • 主题模式