在前端开发中，动态地监听 DOM 元素尺寸变化是一项常见任务。不过，由于浏览器原生的 resize 事件常常会因性能影响而被限制触发次数，因此，借助 npm 包 react-resize-listener 则可以更高效地实现此功能。
本文将介绍如何使用 react-resize-listener 包来监听 DOM 元素尺寸变化，并提供实用示例。
安装
在命令行中使用 npm 安装 react-resize-listener：
npm install react-resize-listener
使用
要使用 react-resize-listener 包，首先需要将其导入到 React 组件中：
import ReactResizeListener from 'react-resize-listener';
接着，可以在组件的渲染方法中使用 ReactResizeListener 组件，将需要监听的 DOM 元素的引用作为 onResize 属性传递给它：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
-------------- - ------------------
-
-------- -
------ -
---- -------------------- -----------------------
-------------------- ---------------------------- --
------
--
-
------------ - -- -- -
-- ---
-
-在上面的示例中，MyComponent 组件包含一个 ref 引用 myElement，它将被传递给 ReactResizeListener 组件。当 myElement 尺寸发生变化时，ReactResizeListener 将会调用 handleResize 方法。
onResize 属性应该是一个函数，该函数将在每次尺寸变化时被调用。它可以采用如下形式定义：
function handleResize(width, height) {
// ...
}其中 width 和 height 参数分别是 DOM 元素的宽度和高度。这样，您就可以在 handleResize 函数中处理任何相关的逻辑了。
示例
下面的示例展示了如何使用 react-resize-listener 包来自动调整图形的大小。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ------------------------
----- -------------- ------- --------------- -
------------------ -
-------------
------------------- - ------------------
---------- - ------------------
-
------------------- -
---------------------------------- -----------------
-
----------------------------- -
-- --------------- --- ---------------- -
---------------------------------- -----------------
-
-
----------------- ----- -
----- ------- - ------------------------
-- ---
-
-------- -
------ -
---- ------------------------- ----------------------------
------- ---------------- ----------------- ------------------------ -------------------------- --
-------------------- ---------------------------- --
------
--
-
------------ - -- -- -
----- --------- - ----------------------------
----- ------ - -------------------
------------ - ----------------------
------------- - -----------------------
---------------------- -----------------
-
-在上面的示例中，我们创建了一个 ResizableGraph 组件，该组件包含一个 canvas 元素，它用于显示图形数据。每当 ResizableGraph 组件被挂载或更新时，都会调用 drawGraph 方法来绘制图形。而当容器元素 graphContainer 的尺寸发生变化时，ReactResizeListener 组件会自动调用 handleResize 方法，该方法会自动调整 canvas 元素的大小，并重新绘制图形。
总结
react-resize-listener 包简单易用，但其功能却十分强大，可帮助我们更高效地监听 DOM 元素尺寸变化。通过本文的介绍和示例，相信您已经掌握了使用该包的技巧和注意事项。祝您在使用 react-resize-listener 时，开发更好的前端应用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564fe81e8991b448e1993