自定义一个 Hooks

我们要编写一个自定义的 hooks，这个 hooks 的功能是获取窗口的大小，名字叫做 useWinSize

注意，hooks 的名字需要 use 开头

import { 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 Example() {
    const size = useWinSize();
    return (
        <p>页面的 Size：{size.width} x {size.height}</p>
    )
}

export default Example;

运行出来：