前言
在前端开发中，列表渲染是非常常见的需求，但是当列表数据过多时，渲染必须非常快才能保证用户体验的流畅性。这时候就需要用到虚拟列表，它只渲染当前可见区域的数据，从而减小了渲染的性能消耗。
在 React 中，用到虚拟列表的情况也很多，react-window 就是一个非常好用的虚拟列表库。但是它本身是以固定的行高来计算滚动位置和可见区域，当列表项高度不统一时，它就无法准确计算滚动位置和可见区域。而 @john-osullivan/react-window-dynamic-fork 就是为了解决这个问题而生的。
安装
在项目中运行以下命令进行安装：
npm install @john-osullivan/react-window-dynamic-fork
使用
- 首先，需要从
@john-osullivan/react-window-dynamic-fork中引入DynamicSizeList。
import { DynamicSizeList } from '@john-osullivan/react-window-dynamic-fork';- 然后按照 react-window 的用法，设置列表项和计算可见区域的方式。但是需要注意的是，要 new 一个 sizeMap 对象，用来保存每个列表项的高度。
-- -------------------- ---- -------
----- ------- - --- ------
----- ---- - -
-- ------
--
-------- ------------------ -
----- ---- - ------------
-- --------------------- -
-- ------
------------------ --------
-
------ -------------------
-- 最后，渲染列表。需要传递以下参数：
DynamicSizeList组件本身的 props。itemSize：计算每个列表项的高度的函数，必填。itemCount：列表项数量，必填。sizeMap：保存每个列表项高度的 Map 对象，必填。children：列表渲染函数，必填。
-- -------------------- ---- -------
----------------
-----------
------------
----------------------
-----------------------
-----------------
-
--------- ------- -- -
-- ----------
--
------------------示例代码
下面是一个使用 DynamicSizeList 渲染虚拟列表的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------------- - ---- --------------------------------------------
-- ----
----- ---- - -------------- ----------------------- ------ -- --
--- ----------------
----- ---- -------- -----
----
-------- ------------- -
----- --------- - ------------ -------
-------- ------------------ -
----- ---- - ------------
-- --------------------- -
----- ------ - ------------------------ - ---- - --- -- ----------
------------------ --------
-
------ -------------------
-
------ -
----------------
-----------
------------
----------------------
-----------------------
-----------------
-
--------- ------- -- -
---- -------------------- ----------------- ------- ---- ----- --------
------------------
------
--
------------------
--
-
------ ------- ------------结语
@john-osullivan/react-window-dynamic-fork 是一个非常好用的虚拟列表库，它可以支持不同高度的列表项，并且还可以以尽可能小的时间渲染大量数据。在实际开发中，如果遇到了列表项高度不统一的问题，可以尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583df4