hooks|hooks 系列六（hook 规则） 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 的依赖 } }

下节预告 【hooks|hooks 系列六（hook 规则）】在下节中，我们将为大家介绍 自定义 hook ，敬请期待！