【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
模拟react中的hooks方法，实现自定义的hooks来封装我们需要重复使用的组件，来优化代码。这种hooks也是利用了react的原生hooks来实现我们需要的特定业务，可以返回任何我们需要的值，也可以不返回值，作为一个副作用方法使用
第三方hooks
- ahooks 官网地址 https://ahooks.js.org/zh-CN
- react-use 文档地址: https://github.com/streamich/react-use
下面，封装了几个自己的简单hooks，加深下对hooks的理解
修改页面标题
-
实现效果
-
实现代码
import { useEffect } from 'react'export function useTitle(title: string): void {useEffect(() => {document.title = title}, [])
}
捕获鼠标位置
- 实现效果
- 实现代码
import { useCallback, useEffect } from 'react'
import { useImmer } from 'use-immer'type TPosition = {x: numbery: 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.clientXdraft.y = e.clientY})}, [])useEffect(() => {document.addEventListener('mousemove', updateMouse)return () => {document.removeEventListener('mousemove', updateMouse)}})return position
}export default useMouse
异步请求
- 实现效果
- 实现代码
import { useEffect } from 'react'
import { useImmer } from 'use-immer'type TResult = {name: stringage: 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