自定义hook

自定义hook 要以 use 开头

逻辑的抽象与复用

强制刷新hook

// 定义
import { useState } from "react";
// 强制刷新 hook
export default function useForceUpdate() {
    const [_, setValue] = useState({})

    const forceUpdate = () => {
        setValue({})
    }
    return forceUpdate
}

// 使用

请求loading hook

import { useState } from "react";
export const useRequestLoadingDispatcher = () => {
    const [loading, setLoading] = useState(false)

    const executeRequest = async (promiseFn) => {
        setLoading(true)
        await promiseFn()
        setLoading(false)
    }
    return {
        loading,
        executeRequest
    }
}

监听窗口滚动

import { useEffect } from "react";

export default function useWindowScrollWatcher(scrollCb) {
    useEffect(() => {
        document.addEventListener('scroll', scrollCb)
        return () => {
            document.removeEventListener('scroll')
        }
    })
}