hooks 系列六：hook 规则

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

Hooks 使用规则

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则：

• 只能在最顶层使用 Hook
• 只能在 React 函数中调用 Hook

接下来我们一条条来说说这两个规则。

只能在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook

确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

这与 React Hooks 调用顺序有关，如果每次调用的时候， Hooks 的调用顺序不一致，React 就不知道到底该调用谁了，因此每次调用 Hooks 的时候，调用顺序都是相同的，所以可以正常工作。

// ------------
// 首次渲染
// ------------
useState('Mary') // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm) // 2. 添加 effect 以保存 form 操作
useState('Poppins') // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle) // 4. 添加 effect 以更新标题

// -------------
// 二次渲染
// -------------
useState('Mary') // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm) // 2. 替换保存 form 的 effect
useState('Poppins') // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle) // 4. 替换更新标题的 effect

// ...

如果想要了解详细原因，请见React explanation

只能在 React 函数中调用 Hook

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

• ✅ 在 React 的函数组件中调用 Hook
• ✅ 在自定义 Hook 中调用其他 Hook (我们将会在后一章节中学习这个。)

遵循此规则，确保组件的状态逻辑在代码中清晰可见。

如何遵守使用规则

React 官方发布了一个 eslint-plugin-react-hooks 的 ESLint 插件，使用该插件强制执行这两条规则。

后续版本默认添加此插件到 Create React App 及其他类似的工具包中。

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 的依赖
  }
}

下节预告

在下节中，我们将为大家介绍 自定义 hook ，敬请期待！