关于前端: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，敬请期待！