怎么在react中創建自定義hooks

這篇文章主要介紹“怎么在react中創建自定義hooks”，在日常操作中，相信很多人在怎么在react中創建自定義hooks問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在react中創建自定義hooks”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、什么是自定義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”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！