自定义hooks实现监控页面高度

实现一个简单的功能，监听页面高度，把他维护为公共组件，其他想使用的组件都可调用。

1. 和写功能一样，写好这个功能的代码逻辑。

       只要注意use开头，最后导出即可

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

// 自定义hooks，要以use开头
function useWinSize() {
    
    const [size, setSize] = useState({
        height: doucument.documentElement.clientHeight,
        width: doucument.documentElement.clientWidth,
    });

/* useCallback 的作用在于利用 memoize 减少无效的 re-render，来达到性能优化的作用。但是，“不要过早的性能优化”。从实际开发的经验来看，在做这类性能优化时，一定得观察比较优化的结果，因为某个小角落的 callback 就可能导致优化前功尽弃，甚至是适得其反。
这里可以直接去掉
*/

    const handleResize =useCallback (() => {
        setWindowSize({
            height: doucument.documentElement.clientHeight,
            width: doucument.documentElement.clientWidth,
        });
    };[]) 

    useEffect(() => {
        // 监听
        window.addEventListener('resize', handleResize);
        
        // 销毁
        return () => window.removeEventListener('resize', handleResize)
    }, []);

    return size;
}

//导出这个钩子
export default useWinSize;

2. 然后其他页面直接调用即可：

import useWinSize from './路径';

//引入自定义的hook
const sizes=useWinSize();

retrun(
    
    //页面直接调用即可

    <p>
        页面size：{ sizes.width} * { sizes.height}
    </p>
);

是不是还挺容易的~~，其实感觉它和高阶组件差不太多，只是可能场景不同，用哪个方便的区别。 

2021最后一篇博文了，感谢自己一年的努力，收获很多~ 

希望自己在新的一年可以静下心来，沉淀更多东西，也希望自己的愿望都可以实现，一直快乐，疯狂加薪！hahaha~