hooks 系列六：hook 規則

快來加入咱們吧！

"小和山的菜鳥們"，爲前端開發者提供技術相關資訊以及系列基礎文章。爲更好的用戶體驗，請您移至咱們官網小和山的菜鳥們 ( 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 ，敬請期待！