react经验1:监听窗体尺寸变化

应用场景:
你的页面中有一个表格、搜索栏、分页控件时，需要根据页面尺寸计算表格的滚动高度，并且当窗体尺寸改变时重新计算一次。

步骤讲解:
以下所有代码都写在函数式组件内

首先声明一个引用变量绑定到页面的顶级节点上

const dom_box = createRef<HTMLDivElement>();
1

<div className={sty.root} ref={dom_box}>
1

接下来声明一个窗体尺寸变化后的处理函数

const handleWindowResize = useCallback(() => {
        if(!dom_box.current){
        	return;
        }
        //dom_box.current就是当前页面的dom元素，有了它就能计算尺寸
    }, [dom_box]);
1
2
3
4
5
6

注意，这个函数需要用useCallback包裹，依赖变量是上一步创建的"dom_box "

接下来绑定窗体尺寸变化事件

useEffect(() => {
        handleWindowResize();
        window.addEventListener('resize', handleWindowResize);
        return () => {
            window.removeEventListener('resize', handleWindowResize);
        }
    }, [handleWindowResize]);
1
2
3
4
5
6
7

注意，这里用的useEffect，依赖变量是上一步创建的"handleWindowResize"
所有步骤就这些。

解释:
addEventListener绑定react组件内声明的函数时，已经形成闭包，这个函数内引用变量都是绑定之前的旧值，因此会造成意料之外的错误。例如"dom_box.current"一开始是空值。
使用useCallback是为了创建函数副本，当依赖变量的内存地址变化时重新创建函数副本。
useEffect会根据依赖变量的内存地址重复执行内置函数。

随着react组件的生命周期演变，声明的dom_box变量一定会有值。
进行dom操作的前提是取得的dom对象不为空。