React自定義hook的方法

更新時間：2022年06月24日 17:07:05 作者：劍老師_

Hook是 React 16.8 的新增特性。它通常與函數式組件同時使用?？梢允购瘮凳浇M件在不編寫 class 的情況下，可以擁有class組件的狀態(tài)、生命周期、引用等功能，這篇文章主要介紹了React自定義hook的相關知識,需要的朋友可以參考下

import { useEffect, useState } from "react";

//定義size對象
interface WindowSize {
    width: number,
    height: number
}
const useWindowSize = () => {
    const [size, setSize] = useState<WindowSize>({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    })

    useEffect(() => {
        //監(jiān)聽size變化
        window.addEventListener('resize', () => {
            setSize({
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            })
        })
        return () => {
            //組件銷毀時移除監(jiān)聽
            window.removeEventListener('resize', () => {
                setSize({
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                })
            })
        }
    },[])
    return size
}
export default useWindowSize

組件中這樣使用：

import useWindowSize from './hooks/useWindowSize';
function App() {
  const size = useWindowSize()
  return (
    <div>
      <div>頁面寬度：{size.width}</div>
      <div>頁面高度：{size.height}</div>
    </div>
  )
}
export default App

在瀏覽器拖動放大縮小時，頁面上的數據可動態(tài)變化

獲取滾動偏移量變化

目標：通過 useWindowScroll()來實時獲取頁面的滾動偏移量

新建一個hook文件useWindowScroll.ts，代碼如下：

import { useEffect, useState } from "react"

//定義偏移量對象
interface ScrollOffset {
    x: number,
    y: number
}

const useWindowScroll = () => {
    const [off, setOff] = useState<ScrollOffset>({
        x: window.scrollX, 
        y: window.scrollY
    })
    useEffect(() => {
        //監(jiān)聽
        window.addEventListener('scroll', () => {
            setOff({
                x: window.scrollX,
                y: window.scrollY
            })
        })
        return () => {
            //移除監(jiān)聽
            window.removeEventListener('scroll', () => {
                setOff({
                    x: window.scrollX,
                    y: window.scrollY
                })
            })
        }
    })
    return off
}
export default useWindowScroll

組件中這樣使用：

import useWindowScroll from './hooks/useWindowScroll';
function App() {
  const offSet = useWindowScroll()

  return (
    <div style={{height: '10000px', width: '10000px'}}>
      <div>滾動y：{offSet.y}</div>
      <div>滾動x：{offSet.x}</div>
    </div>
  )
}

export default App

自動同步至localStorage

目標：通過 const [value, setValue] = useLocalStorage('key', 'value') 可以傳入默認的初始value和key，且每次修改value可以自動同步到localStorage中

新建一個hook類useLocalStorage，代碼如下：

import { useEffect, useState } from "react"

const useLocalStorage = (key: string, defaultValue: string) : ([string, React.Dispatch<React.SetStateAction<string>>]) => {
    const [value, setValue] = useState(defaultValue)
    useEffect(() => {
        window.localStorage.setItem(key, value)
    },[key, value])
    return [value, setValue]
}

export default useLocalStorage

組件中使用：

import useLocalStorage from './hooks/useLocalStorage';

function App() {

  const [value, setValue] = useLocalStorage('key', 'react')

  return (
    <div>

    <button onClick={() => {
        //點擊修改value，會自動同步至本地
        setValue('vue')
      }}>點擊</button>
      <div>{ value }</div>
    </div>
  )
}
export default App

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

您可能感興趣的文章:

react?diff?算法實現思路及原理解析
這篇文章主要介紹了react?diff?算法實現思路及原理解析,本節(jié)我們正式進入基本面試必考的核心地帶?--?diff?算法，了解如何優(yōu)化和復用?dom?操作的，還有我們常見的?key?的作用,需要的朋友可以參考下
2022-05-05
React中this丟失的四種解決方法
這篇文章主要給大家介紹了關于React中this丟失的四種解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用React具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-03-03
React的生命周期函數初始掛載更新移除詳解
這篇文章主要為大家介紹了React的生命周期函數初始掛載更新移除詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
TS裝飾器bindThis優(yōu)雅實現React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實現React類組件中this綁定，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
使用react-beautiful-dnd實現列表間拖拽踩坑
相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場景，本文主要介紹了使用react-beautiful-dnd實現列表間拖拽踩坑，感興趣的可以了解一下
2021-05-05
React Native中ScrollView組件輪播圖與ListView渲染列表組件用法實例分析
這篇文章主要介紹了React Native中ScrollView組件輪播圖與ListView渲染列表組件用法,結合實例形式詳細分析了ScrollView組件輪播圖與ListView渲染列表組件具體功能、使用方法與操作注意事項,需要的朋友可以參考下
2020-01-01
React實現多標簽在有限空間內展示
在業(yè)務中,需要在一個卡片組件中展示多個標簽,標簽組件高度相同,寬度和出現順序不同,要求標簽只能在有限的空間內展示,所以本文給大家介紹了React實現多標簽在有限空間內展示,需要的朋友可以參考下
2023-12-12
React 組件中實現事件代理
React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比,主要增加了兩個特性：事件代理、和事件自動綁定,本文主要介紹了React 組件中實現事件代理,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
在React頁面重新加載時保留數據的實現方法總結
在React頁面重新加載時保留數據,可以通過多種方法來實現,常見的方法包括使用瀏覽器的本地存儲（Local Storage 或 Session Storage）、URL參數、以及服務器端存儲等,本文給大家總結了一些具體實現方法,需要的朋友可以參考下
2024-06-06
react-redux的connect示例詳解
connect()是react-redux中的核心方法之一，它將react組件預redux中的Store真正連接在一起，這篇文章主要介紹了react-redux的connect詳解,需要的朋友可以參考下
2023-01-01