教你在react中創(chuàng)建自定義hooks

更新時間：2021年11月13日 10:45:15 作者：JingG459

簡單來說就是使用自定義hook可以將某些組件邏輯提取到可重用的函數(shù)中。自定義hook是一個從use開始的調用其他hook的Javascript函數(shù)，下面看下react中創(chuàng)建自定義hooks的相關知識，感興趣的朋友一起看看吧

一、什么是自定義hooks

邏輯復用

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

二、不使用自定義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>
  )

很明顯，以上兩個例子呈現(xiàn)效果不同，但使用的邏輯代碼大部分相同時，這些邏輯代碼我們就可以使用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函數(shù)中提取了此功能?，F(xiàn)在，我們可以將其導入到要使用的任何位置！

最后像使用普通函數(shù)那樣使用即可

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

很明顯使代碼量減少了

到此這篇關于react中創(chuàng)建自定義hooks的文章就介紹到這了,更多相關react自定義hooks內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

react
hooks

React實現(xiàn)雙滑塊交叉滑動
這篇文章主要為大家詳細介紹了React實現(xiàn)雙滑塊交叉滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
React組件的創(chuàng)建與state同步異步詳解
這篇文章主要介紹了react組件實例屬性state,有狀態(tài)state的組件稱作復雜組件,沒有狀態(tài)的組件稱為簡單組件，狀態(tài)里存儲數(shù)據(jù),數(shù)據(jù)的改變驅動頁面的展示，本文結合實例代碼給大家詳細講解，需要的朋友可以參考下
2023-03-03
ReactNative支付密碼輸入框實現(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
React-hooks面試考察知識點匯總小結(推薦)
這篇文章主要介紹了React-hooks面試考察知識點匯總,Hook?使你在無需修改組件結構的情況下復用狀態(tài)邏輯，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-10-10
react-native動態(tài)切換tab組件的方法
在APP中免不了要使用tab組件,有的是tab切換,也有的是tab分類切換.這篇文章主要介紹了react-native動態(tài)切換tab組件的方法，非常具有實用價值，需要的朋友可以參考下
2018-07-07
React?Suspense解決競態(tài)條件詳解
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
React18系列commit從0實現(xiàn)源碼解析
這篇文章主要為大家介紹了React18系列commit從0實現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
React中的生命周期用法詳解
這篇文章主要介紹了React中的生命周期用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-03-03
React實現(xiàn)動態(tài)調用的彈框組件
這篇文章主要為大家詳細介紹了React實現(xiàn)動態(tài)調用的彈框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
React項目中axios的封裝與API接口的管理詳解
Axios是一個npm軟件包,允許應用程序將HTTP請求發(fā)送到Web API,下面這篇文章主要給大家介紹了關于React項目中axios的封裝與API接口的管理的相關資料,需要的朋友可以參考下
2021-09-09