摘要：使用完成副作用操作，賦值給的函數會在組件渲染到屏幕之后。如此很容易產生，并且導致邏輯不一致。同時，這也是很多人將與狀態管理庫結合使用的原因之一。當我們通過的第二個數組類型參數，指明當前的依賴，就能避免不相關的執行開銷了。

本文內容大部分參考了 overreacted.io 博客一文，同時結合 React Hook 官方 文章，整理并歸納一些筆記和輸出個人的一些理解

官方介紹：Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。

基礎 Hook

useState

// 傳入初始值，作為 state
const [state, setState] = useState(initialState)

//  `惰性初始 state`；傳入函數，由函數計算出的值作為 state
// 此函數只在初始渲染時被調用
const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props)
  return initialState
})

useEffect

該 Hook 接收一個包含命令式、且可能有副作用代碼的函數.

在函數組件主體內（這里指在 React 渲染階段）改變 DOM、添加訂閱、設置定時器、記錄日志以及執行其他包含副作用的操作都是不被允許的，因為這可能會產生莫名其妙的 bug 并破壞 UI 的一致性。

使用 useEffect 完成副作用操作，賦值給 useEffect 的函數會在組件渲染到屏幕之后。你可以把 effect 看作從 React 的純函數式世界通往命令式世界的逃生通道。

默認情況下，effect 將在每輪渲染結束后執行，但你可以選擇讓它 在只有某些值改變的時候才執行。詳情見后面。

清除 effect
通常，組件卸載時需要清除 effect 創建的諸如訂閱或計時器 ID 等資源。要實現這一點，useEffect 函數需返回一個清除函數。以下就是一個創建訂閱的例子：

useEffect(() => {
  const subscription = props.source.subscribe()
  return () => {
    // 清除訂閱
    subscription.unsubscribe()
  }
}, [依賴])

useContext

額外的 Hook

useReducer

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

React 沒有提供將可復用性行為“附加”到組件的途徑（例如，把組件連接到 store）。如果你使用過 React 一段時間，你也許會熟悉一些解決此類問題的方案，比如 render props 和 高階組件。但是這類方案需要重新組織你的組件結構，這可能會很麻煩，使你的代碼難以理解。如果你在 React DevTools 中觀察過 React 應用，你會發現由 providers，consumers，高階組件，render props 等其他抽象層組成的組件會形成“嵌套地獄”。盡管我們可以在 DevTools 過濾掉它們，但這說明了一個更深層次的問題：React 需要為共享狀態邏輯提供更好的原生途徑。

你可以使用 Hook 從組件中提取狀態邏輯，使得這些邏輯可以多帶帶測試并復用。Hook 使你在無需修改組件結構的情況下復用狀態邏輯。 這使得在組件間或社區內共享 Hook 變得更便捷。

我們經常維護一些組件，組件起初很簡單，但是逐漸會被狀態邏輯和副作用充斥。每個生命周期常常包含一些不相關的邏輯。例如，組件常常在 componentDidMount 和 componentDidUpdate 中獲取數據。但是，同一個 componentDidMount 中可能也包含很多其它的邏輯，如設置事件監聽，而之后需在 componentWillUnmount 中清除。相互關聯且需要對照修改的代碼被進行了拆分，而完全不相關的代碼卻在同一個方法中組合在一起。如此很容易產生 bug，并且導致邏輯不一致。

在多數情況下，不可能將組件拆分為更小的粒度，因為狀態邏輯無處不在。這也給測試帶來了一定挑戰。同時，這也是很多人將 React 與狀態管理庫結合使用的原因之一。但是，這往往會引入了很多抽象概念，需要你在不同的文件之間來回切換，使得復用變得更加困難。

為了解決這個問題，Hook 將組件中相互關聯的部分拆分成更小的函數（比如設置訂閱或請求數據），而并非強制按照生命周期劃分。你還可以使用 reducer 來管理組件的內部狀態，使其更加可預測。

下面的代碼可以直觀的體現出來，在某些場景下，使用 hook 來實現對應的功能，可以節省大部分的代碼

對比 Class 組件來說，清除副作用要簡單的多，如下代碼，在 useEffect hook 里面返回一個函數，當我們的函數組件卸載的時候，就會自動執行這個函數，從而來清除副作用。想想我們在 Class 組件里面需要在 componentWillUnmount 生命周期里面去編寫對應的代碼。

對比兩者我們發現，使用 useEffect 的方式，能夠將掛載和卸載的邏輯更加緊密的耦合在一起，從而減少 BUG 的發生

useEffect(() => {
  const id = setInterval(() => {
    setCount(count => count + 1)
  }, 1000)
  return () => clearInterval(id)
}, [])

// 比如給 windows 掛載監聽函數
useEffect(() => {
  window.addEventListener("reszie", handleRezie)

  return () => {
    window.removeEventListener("resize", handleRezie)
  }
}, [])

只在最頂層使用 Hook：不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層調用他們。

不要在普通的 JavaScript 函數中調用 Hook。你可以

[x] 在 React 的函數組件中調用 Hook

[x] 在自定義 Hook 中調用其他 Hook

使用 useEffect 完成副作用操作，賦值給 useEffect 的函數會在組件渲染到屏幕之后；牢記這句話。

仔細觀察如下代碼，當函數組件里面，有多個 effect 的時候，默認的 effect 將在每次 UI render 之后被調用。當我們通過 useEffect 的第二個數組類型參數，指明當前 effect 的依賴，就能避免不相關的執行開銷了。

通過啟用 eslint-plugin-react-hooks 插件，來強制提醒我們在使用 effect 的時候，申明所需要的依賴

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

const CounterHook = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState("heaven")

  useEffect(() => {
    document.title = `counterWithHook ${count}`
  }, [count])

  useEffect(() => {
    console.log("you name is", name)
  }, [name])

  return (
    

      
Counter with Hook
      
You click {count} times
       setCount(count => count + 1)}>Click me
      

         setName(e.target.value)} />
        

        your name is {name}
      
    
  )
}

對于 useEffect 內部方法，一旦引用外部的函數，那么這個時候需要注意了：
需要把 useEffect 內部引用到的方式，聲明為當前 effect 的依賴
在下圖的代碼中，我們可以看到，在 effect 函數內部，引入外部的函數，我們的 eslint-plugin-react-hooks 插件會自動提示我們需要把對應的函數作為依賴添加進去

不規范示例：這里在安裝了插件的情況下，會自動提示我們將 fetchData 函數移入 effect 內部

const getFetchUrl = () => {
  return `https://hn.algolia.com/api/v1/search?query=${query}`
}

const fetchData = async () => {
  return axios.get(getFetchUrl())
}

useEffect(() => {
  fetchData().then(resp => {
    console.log(resp)
    setData(resp.data)
  })
}, [])

正確的寫法：

useEffect(() => {
  const getFetchUrl = () => {
    return `https://hn.algolia.com/api/v1/search?query=${query}`
  }

  const fetchData = async () => {
    return axios.get(getFetchUrl())
  }

  fetchData().then(resp => {
    console.log(resp)
    setData(resp.data)
  })
}, [query])

每一次渲染都有它自己的 Props and State
每一次渲染都有它自己的事件處理函數
每次渲染都有它自己的 Effects

運行如下代碼之后，在我們點擊 Show alert 按鈕之后，然后點擊 Click me 按鈕，alert 輸出的永遠是在點擊的那個時刻的 count;

換句話來說；在 hooks 組件里面，每一次的渲染，都相當于記錄當前次的『快照』

import React, { useEffect, useState } from "react"
const Counter = () => {
  const [count, setCount] = useState(0)

  const handleAlertClick = () => {
    setTimeout(() => {
      alert(`Yout clicked me: ${count}`)
    }, 3000)
  }

  useEffect(() => {
    setTimeout(() => {
      console.log(`Yout clicked ${count} times`)
    }, 3000)
  })

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>Click me
      Show alert
    
  )
}

export default Counter

通過自定義 Hook，可以將組件邏輯提取到可重用的函數中。

當我們想在兩個函數之間共享邏輯時，我們會把它提取到第三個函數中。而組件和 Hook 都是函數，所以也同樣適用這種方式。

自定義 Hook 是一個函數，其名稱以 “use” 開頭，函數內部可以調用其他的 Hook。

useService.js 自定義的一個 server hook，該 hook 封裝了 ajax 請求中的 { loading, error, response } 三個基礎邏輯；有了這個 hook 我們就能很輕松的在每次網絡請求里面去處理各種異常邏輯了；詳細用法看文章最后的 Table 分頁操作實例

import { useEffect, useRef, useState, useCallback } from "react"
import { isEqual } from "lodash"

const useService = (service, params) => {
  const prevParams = useRef(null)
  const [callback, { loading, error, response }] = useServiceCallback(service)

  useEffect(() => {
    if (!isEqual(prevParams.current, params)) {
      prevParams.current = params
      callback(params)
    }
  })

  return { loading, error, response }
}

const useServiceCallback = service => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [response, setResponse] = useState(null)

  // 使用 useCallback，來判斷 service 是否改變
  const callback = useCallback(
    params => {
      setLoading(true)
      setError(null)
      service(params)
        .then(response => {
          console.log(response)
          setLoading(false)
          setResponse(response)
        })
        .catch(error => {
          setLoading(false)
          setError(error)
        })
    },
    [service]
  )

  return [callback, { loading, error, response }]
}

如下代碼，使用 hook 的方式來實現表格的分頁，數據請求操作，

使用 hook 實現一個簡易版的跑馬燈抽獎邏輯

官方 Hook 介紹
Hook 規則
Hook API 索引
如何在 Hook 中發起請求
useEffect 詳解