一、什麼是自定義hooks

邏輯複用

簡單來說就是使用自定義hook可以將某些元件邏輯提取到可重用的函式中。自定義hook是一個從use開始的呼叫其他hook的函式。

二、不使用自定義hook時

例1：當我們整個頁面需要獲取使用者滑鼠移動的座標時，不使用hook的程式碼，我們可以這樣寫

  const [position,setPosition] = useState({
    x: 0,y: 0
  })
  useEffect(() => {
    const move = (e) => {
      setPosition({ x: e.x,y: e.y })
    }
    document.addEventListener('mousemove',move)
    return () => {
      document.removeEventListener('mousemove',move)
    }
  },[])
  return (
    <div>
      x:{position.x}
      y:{position.y}
    </div>
  )

例2：當我們頁面中有一個圖片要跟隨滑鼠移動時，不使用hook的程式碼，我們也可以這樣寫：

const [position,[])
  return (
    <div>
      <img
        src={img}
        style={{
          position: 'absolute',top: position.y,left: position.x,}}
        alt="教你在react中建立自定義hooks"
      />
    </div>
  )

很http://www.cppcns.com明顯，以上兩個例子呈現效果不同，但使用的邏輯程式碼大部分相同時，這些邏輯程式碼我們就可以使用hook進行邏輯複用

三、使用自定義hook

我們提取以上兩個例子裡可以複用的邏輯程式碼，新建一個名為useMousePosition的檔案

import { useState,useEffect } from 'react'
export default function useMousePosition() {
  const [position,y: 0
  })
  useEffect(() => {
    const move = (e) => {
      setPosition({ x: e.x,[])
  return position
}

我們在useMousePosition函式中提取了此功能。現在，我們可以將其匯入到要使用的任何位置！

 最後像使用普通函式那樣使用即可

  const position = useMousePosition()
  return (
    <div>
      x:{position.x}
      y:{position.y}
    </div>
  )

很明顯使程式碼量減少了

到此這篇關於react中建立自定義hooks的文章就介紹到這了,更多相關react自定義hooks內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！