前端开发中，我们经常需要处理大量的数据和列表，并且在渲染时需要进行优化性能，避免造成卡顿和浏览器崩溃的问题。在这种情况下，一个虚拟列表是非常适合的解决方案。而 npm 上的 react-virtualized-auto-sizer 就是一个非常好用的 react 组件，可以帮助我们完成虚拟化的处理，同时方便地调整列表大小。
react-virtualized-auto-sizer 是什么？
react-virtualized-auto-sizer 是一个能够帮助我们根据父组件大小自动调节自身大小的组件，同时还支持 virtualized 特性。这个组件本身不会进行列表渲染，但它可以帮助我们方便地完成列表渲染时需要的自适应宽高。
如何使用 react-virtualized-auto-sizer？
首先，我们需要安装 react-virtualized-auto-sizer 依赖，使用如下命令：
npm install react-virtualized-auto-sizer
然后，在代码中引入这个组件：
import { AutoSizer } from 'react-virtualized-auto-sizer';AutoSizer 组件是 react-virtualized-auto-sizer 包中提供的一个组件类。我们可以把需要自适应大小的组件包裹在这个组件中来实现大小的自动调整。
如下：
-- -------------------- ---- -------
-----------
--- ------ ------ -- -- -
-----
-------------
---------------
---------------
--------------
-------------------------
--
--
------------上面的代码中，AutoSizer 组件包裹了一个 List 组件，并且通过返回一个包含 width 和 height 属性的对象，子组件 List 可以使用这两个属性来进行自适应大小的渲染。
react-virtualized-auto-sizer 示例代码
下面是一份 react-virtualized-auto-sizer 的示例代码，来展示如何使用这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---------- ---- - ---- --------------------
-- ------- ----
----- ---- - -
- ----- ------ -------- ------------ --------- --------- --
- ----- ----- ----- ------------ --------- --------- --
- ----- ----- ----- ------------ ---------- --------- --
--
----- ----------- - -- ------ ---- ----- -- -- -
----- ---- - ------------
------ -
---- --------- --------------
----------------------
-----------------------------
------
--
--
----- --- - -- -- -
------ -
-----------
--- ------ ------ -- -- -
-----
-------------
---------------
----------------------
--------------
-------------------------
--
--
------------
--
--
-------------------- --- ---------------------------------总结
通过使用 react-virtualized-auto-sizer 这个组件，我们可以非常方便地进行虚拟列表的渲染，并且在父组件大小改变时自动调节自身大小，保证了列表的优化性能和流畅度。同时，这个组件的使用也可以作为 react 组件和 virtualized 组件 library 的学习和指导，可以帮助我们更好地设计和实现优秀的组件库和性能优化方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa81b5cbfe1ea06104e0