快来退出咱们吧！
"小和山的菜鸟们"，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( 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 的 stateuseEffect(persistForm) // 2. 增加 effect 以保留 form 操作useState('Poppins') // 3. 应用 'Poppins' 初始化变量名为 surname 的 stateuseEffect(updateTitle) // 4. 增加 effect 以更新题目// -------------// 二次渲染// -------------useState('Mary') // 1. 读取变量名为 name 的 state（参数被疏忽）useEffect(persistForm) // 2. 替换保留 form 的 effectuseState('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 ，敬请期待！