【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能

模拟react中的hooks方法,实现自定义的hooks来封装我们需要重复使用的组件,来优化代码。这种hooks也是利用了react的原生hooks来实现我们需要的特定业务,可以返回任何我们需要的值,也可以不返回值,作为一个副作用方法使用

第三方hooks

下面,封装了几个自己的简单hooks,加深下对hooks的理解

修改页面标题

  • 实现效果

  • 实现代码

js 复制代码
import { useEffect } from 'react'

export function useTitle(title: string): void {
    useEffect(() => {
        document.title = title
    }, [])
}

捕获鼠标位置

  • 实现效果
  • 实现代码
js 复制代码
import { useCallback, useEffect } from 'react'
import { useImmer } from 'use-immer'

type TPosition = {
    x: number
    y: number
}

function useMouse(): TPosition {
    const [position, setPosition] = useImmer<TPosition>({
        x: 0,
        y: 0
    })
    const updateMouse = useCallback((e: MouseEvent) => {
        console.log('useEffect updateMouse')
        setPosition(draft => {
            draft.x = e.clientX
            draft.y = e.clientY
        })
    }, [])

    useEffect(() => {
        document.addEventListener('mousemove', updateMouse)

        return () => {
            document.removeEventListener('mousemove', updateMouse)
        }
    })

    return position
}

export default useMouse

异步请求

  • 实现效果
  • 实现代码
js 复制代码
import { useEffect } from 'react'
import { useImmer } from 'use-immer'

type TResult = {
    name: string
    age: number
}
function getInfo(): Promise<TResult> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({
                name: 'why',
                age: 18
            })
        }, 2000)
    })
}

const useGetInfo = () => {
    const [loading, setLoading] = useImmer(false)
    const [info, setInfo] = useImmer<TResult | null>(null)

    useEffect(() => {
        setLoading(true)
        getInfo().then(result => {
            setInfo(result)
            setLoading(false)
        })
    }, [])

    return { loading, info }
}

export default useGetInfo
相关推荐
JefferyXZF15 分钟前
Next.js Server Actions 详解: 无缝衔接前后端的革命性技术(八)
前端·全栈·next.js
芜青2 小时前
HTML+CSS:浮动详解
前端·css·html
SchuylerEX2 小时前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷3 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技3 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马3 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
unfetteredman3 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵4 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源
山间板栗4 小时前
微信小程序环境变量设置方案
前端
电商API大数据接口开发Cris4 小时前
Java Spring Boot 集成淘宝 SDK:实现稳定可靠的商品信息查询服务
前端·数据挖掘·api