hooks 系列六：hook 规则

快来加入咱们吧！

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

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

Hooks 使用规则

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

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

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

接下来咱们一条条来讲说这两个规则。shell

只能在最顶层使用 Hook

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

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

这与 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。**你能够：markdown

✅ 在 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 ，敬请期待！