react经验1:监听窗体尺寸变化_淘人居士_react 元素实时顶部视窗距离

大大的周 02-07 2130

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

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

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

const dom_box = createRef<HTMLDivElement>(); <div className={sty.root} ref={dom_box}>

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

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

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

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

useEffect(() => { handleWindowResize(); window.addEventListener('resize', handleWindowResize); return () => { window.removeEventListener('resize', handleWindowResize); } }, [handleWindowResize]);

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

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

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