关于前端:hooks-系列六hook-规则

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

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

Hook 是 React 16.8 的新增个性。它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性。

Hook 实质就是 JavaScript 函数，然而在应用它时须要遵循两条规定：

只能在最顶层应用 Hook
只能在 React 函数中调用 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

不要在一般的 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，敬请期待！

关于前端:hooks-系列六hook-规则

快来退出咱们吧！

Hooks 应用规定

只能在最顶层应用 Hook

只能在 React 函数中调用 Hook

如何恪守应用规定

下节预报