React Hooks学习之旅七：自定义Hooks函数

监听窗口大小案例

自定义的Hooks函数命名必须以use开头。

新建Example9.js文件：

import React, { useState,useEffect,useCallback } from 'react';

/**自定义函数命名必须use开头 */
/**监控窗口大小 */
function useWinSize(){
    const [size,setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    /**useCallback会缓存方法 */
    const onResize = useCallback(()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    },[])//只执行一次，置空

    useEffect(()=>{
        /**注册weindows监听事件 */
        window.addEventListener('resize',onResize);
        /**销毁时执行 */
        return ()=>{
            window.removeEventListener('resize',onResize);
        }
    },[])//只执行一次，置空数组

    return size;
}

function Example9(){
    const size = useWinSize();
    return(
    <div>页面的size：{size.width} × {size.height}</div>
    )
}

export default Example9;

实现效果：