[JavaScript知识库]React Hooks -- 自定义Hooks函数

自定义Hooks函数偏向于功能，而组件偏向于界面和业务逻辑。

采用use开头，这样才能区分出什么是组件，什么是自定义函数。

import React, { useState ,useEffect ,useCallback } from 'react';
function useWinSize(){
    const [ size , setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    },[])
    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])

    return size;

}

function App(){

    const size = useWinSize()
    return (
        <div>页面Size:{size.width}x{size.height}</div>
    )
}

export default App

PS：

一、使用useCallback，目的是为了缓存方法，使用useMemo是为了缓存变量。

二、使用useEffect第一次进入方法时用useEffect来注册resize监听时间。为了防止一直监听所以在组件卸载时，使用return的方式移除监听。