前言
在前端开发中，我们经常需要获取 DOM 元素的宽高或者位置等信息，在之前，我们可能使用 getBoundingClientRect 或者其他方法去获取这些信息。现在，有一个工具库 react-size-fetcher 可以帮助我们更加方便地获取元素的信息。
安装
使用 react-size-fetcher 最简单的方式是通过 npm 进行安装。
npm install react-size-fetcher --save
使用
在实际项目中使用 react-size-fetcher 很简单，我们只需要在需要获取元素信息的地方使用 SizeFetcher 组件，并将需要获取信息的元素包裹在该组件中即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ ------- -------- ----- -
------ -
------------
-------------- -- -
----------------- --- ------
--
-
---------------
--------------
--
-代码示例中，我们引入了 react-size-fetcher 的 SizeFetcher 组件，并在该组件内使用了一个 div 元素。
然后我们在 SizeFetcher 组件上设置了 onSize 回调函数，该函数会在包裹的元素的宽高大小发生变化时被调用。回调函数接收一个 size 对象，该对象包含当前元素的宽高、左上角坐标等信息。我们在回调函数中将 size 打印出来以方便观察。
参数
onSize
onSize 是 SizeFetcher 的必须参数，它接收一个回调函数，在组件所包裹的元素宽高大小发生变化时触发。回调函数接收一个 size 对象作为参数，该对象包含当前元素的宽高、左上角坐标等信息。
debounceTime
debounceTime 是 SizeFetcher 的可选参数，指定宽高尺寸变化回调函数的 debounce 时间，单位：毫秒，默认值为 16ms。
<SizeFetcher debounceTime={200} onSize={(size) => console.log(size)}>
<div>请获取我</div>
</SizeFetcher>throttleTime
throttleTime 是 SizeFetcher 的可选参数，指定宽高尺寸变化回调函数的 throttle 时间，单位：毫秒，默认值为 16ms。与 debounceTime 属性不同的是，throttleTime 会在每一次 resize 事件触发的时候都执行一次回调函数。
<SizeFetcher throttleTime={200} onSize={(size) => console.log(size)}>
<div>请获取我</div>
</SizeFetcher>结语
通过以上简单的介绍，我们可以看到 react-size-fetcher 提供了一种简便的方式来获取 DOM 元素的宽高、位置等信息。
使用 react-size-fetcher 可以帮助我们更加方便地获取元素信息，这对于一些要求比较高的项目而言非常实用。
相信通过本文的介绍，大家已经可以轻松使用 react-size-fetcher 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ebf81e8991b448dc7d4