欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React自定義hook的方法

 更新時(shí)間:2022年06月24日 17:07:05   作者:劍老師_  
Hook是 React 16.8 的新增特性。它通常與函數(shù)式組件同時(shí)使用??梢允购瘮?shù)式組件在不編寫 class 的情況下,可以擁有class組件的狀態(tài)、生命周期、引用等功能,這篇文章主要介紹了React自定義hook的相關(guān)知識(shí),需要的朋友可以參考下
  • 什么是hook

HookReact 16.8 的新增特性。它通常與函數(shù)式組件同時(shí)使用??梢允购瘮?shù)式組件在不編寫 class 的情況下,可以擁有class組件的狀態(tài)、生命周期、引用等功能。

  • 常用的有哪些hook

React中常用的hooks有:

  • useState 狀態(tài)管理
  • useEffect 生命周期
  • useContext 跨組件數(shù)據(jù)傳遞
  • useRef 組件引用
  • ....
  • 自定義hook

自定義hook其實(shí)就是自定義函數(shù),與我們寫函數(shù)組件非常類似。自定義的hook組件的命名與系統(tǒng)的hooks一樣,需要以use開頭。下面我們用react+ts就來介紹一下常用的幾個(gè)自定義hook

  • 獲取窗口寬高變化

實(shí)現(xiàn)目標(biāo):通過 useWindowSize()來實(shí)時(shí)獲取窗口的寬高

新建一個(gè)hook文件useWindowSize.ts,代碼如下:

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 () => {
            //組件銷毀時(shí)移除監(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

在瀏覽器拖動(dòng)放大縮小時(shí),頁面上的數(shù)據(jù)可動(dòng)態(tài)變化

  • 獲取滾動(dòng)偏移量變化

目標(biāo):通過 useWindowScroll()來實(shí)時(shí)獲取頁面的滾動(dòng)偏移量

新建一個(gè)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>滾動(dòng)y:{offSet.y}</div>
      <div>滾動(dòng)x:{offSet.x}</div>
    </div>
  )
}

export default App
  • 自動(dòng)同步至localStorage

目標(biāo):通過 const [value, setValue] = useLocalStorage('key', 'value') 可以傳入默認(rèn)的初始value和key,且每次修改value可以自動(dòng)同步到localStorage中

新建一個(gè)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={() => {
        //點(diǎn)擊修改value,會(huì)自動(dòng)同步至本地
        setValue('vue')
      }}>點(diǎn)擊</button>
      <div>{ value }</div>
    </div>
  )
}
export default App

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

相關(guān)文章

  • React Native 搭建開發(fā)環(huán)境的方法步驟

    React Native 搭建開發(fā)環(huán)境的方法步驟

    本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • React 組件渲染和更新的實(shí)現(xiàn)代碼示例

    React 組件渲染和更新的實(shí)現(xiàn)代碼示例

    這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-02
  • 自己動(dòng)手封裝一個(gè)React Native多級聯(lián)動(dòng)

    自己動(dòng)手封裝一個(gè)React Native多級聯(lián)動(dòng)

    這篇文章主要介紹了自己動(dòng)手封裝一個(gè)React Native多級聯(lián)動(dòng),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式

    React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式

    本篇文章主要介紹了React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • react實(shí)現(xiàn)頁面水印效果的全過程

    react實(shí)現(xiàn)頁面水印效果的全過程

    大家常常關(guān)注的是網(wǎng)站圖片增加水印,而很少關(guān)注頁面水印,其實(shí)這個(gè)需求也是比較常見的,比如公文系統(tǒng)、合同系統(tǒng)等,這篇文章主要給大家介紹了關(guān)于react實(shí)現(xiàn)頁面水印效果的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • Native?Memory?Tracking追蹤區(qū)域示例分析

    Native?Memory?Tracking追蹤區(qū)域示例分析

    這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性

    React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性

    在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化,還能獲取到改變前的舊值,而在 React 中是沒有 watch 的,今天通過本文給大家講解React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下
    2023-06-06
  • react?hooks頁面實(shí)時(shí)刷新方式(setInterval)

    react?hooks頁面實(shí)時(shí)刷新方式(setInterval)

    這篇文章主要介紹了react?hooks頁面實(shí)時(shí)刷新方式(setInterval),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • react redux入門示例

    react redux入門示例

    本篇文章主要介紹了react redux入門示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04
  • react使用.env文件管理全局變量的方法

    react使用.env文件管理全局變量的方法

    本文主要介紹了react使用.env文件管理全局變量的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01

最新評論