【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: 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

异步请求

• 实现效果
  
• 实现代码

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