hooks 系列七：自定義 hook

快來加入咱們吧！

"小和山的菜鳥們"，爲前端開發者提供技術相關資訊以及系列基礎文章。爲更好的用戶體驗，請您移至咱們官網小和山的菜鳥們 ( xhs-rookies.com/ ) 進行學習，及時獲取最新文章。

"Code tailor" ，若是您對咱們文章感興趣、或是想提一些建議，微信關注 「小和山的菜鳥們」 公衆號，與咱們取的聯繫，您也能夠在微信上觀看咱們的文章。每個建議或是贊同都是對咱們極大的鼓勵！

自定義 hook

官方文檔在講自定義 hook時，給了一個好友狀態的例子，可是例子較爲複雜，難懂。在這裏咱們用一種更簡單的方式，教您學會自定義 hook。

什麼是自定義 hook

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

自定義 Hook 是一個函數，其名稱以 「use」 開頭，函數內部能夠調用其餘的 hook

與組件中一致，請確保只在 自定義 hook 的頂層無條件地調用其餘 hook

一個簡單的自定義 hook 案例

使用一個最簡單的代碼來了解一下自定義 hook

import { useState } from 'react'

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  return value
}

function App() {
  const myHookValue = useMyHook('myHook')
  return <div className="app">{myHookValue}</div>
}
複製代碼

上述代碼中，咱們就能夠看出，我自定義了一個名爲 useMyHook 的自定義 hook ，而它也並無什麼功能，只是用來返回一個自定義的值。結果展現：

對案例進行升級

上面的案例中，咱們只是進行簡單的展現，而並無其餘的任何操做，你可能還不能理解什麼是 自定義 hook，那麼如今，咱們來對上面的案例進行升級，加入一個 input，來讓你更清楚的認識到 自定義 hook.

咱們如今須要有一個輸入框，並經過一個自定義 hook ，來對它進行值的傳遞和函數值的修改。

import { useState } from 'react'

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  const onChange = (e) => {
    setValue(e.target.value)
  }
  return { value, onChange }
}

function App() {
  const myHookValue = useMyHook('myHook')
  return (
    <div className="app"> <p>value:{myHookValue.value}</p> <input value={myHookValue.value} onChange={myHookValue.onChange} /> </div>
  )
}
複製代碼

上面的代碼中，咱們建了一個能夠經過輸入框輸入內容實時更改數據的案例。

經過一個 自定義 hook useMyHook 來實現，在這裏，咱們在 自定義 hook 中返回一個 value ，用來展現如今的值。一個 onChange 函數，用來修改當前的 value。而咱們在使用時，p 標籤中展現的是如今 value，input 的改變函數使用的是自定義中的 onChange，展現值時 myHookValue 中的 value。

結果顯示：

小結

至此，咱們最簡單的自定義 hook 案例就結束了。

自定義 hook 必需要以 use 開頭命名，在其內部調用其餘 hook 。好比 例子中咱們使用的 useMyHook，就是 use 開頭的命名，在其中調用了 useState.

下節預告

到這裏，hooks 的學習快要結束了，後面咱們將會幫助你們進行 hooks 的總結，並用實戰案例幫助你們進一步理解