教你在react中創建自定義hooks

Posted on by

一、什麼是自定義hooks

邏輯復用

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

二、不使用自定義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, 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>
      <img
        src={img}
        style={{
          position: 'absolute',
          top: position.y,
          left: position.x,
        }}
        alt=""
      />
    </div>
  )

很明顯，以上兩個例子呈現效果不同，但使用的邏輯代碼大部分相同時，這些邏輯代碼我們就可以使用hook進行邏輯復用

三、使用自定義hook

我們提取以上兩個例子裡可以復用的邏輯代碼，新建一個名為useMousePosition的文件

import { useState, useEffect } from 'react'
export default function useMousePosition() {
  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 position
}

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

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

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

        很明顯使代碼量減少瞭

到此這篇關於react中創建自定義hooks的文章就介紹到這瞭,更多相關react自定義hooks內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：