在 React 开发中，我们经常会遇到需要生成可滚动的列表的情况。为了方便开发，我们可以使用 react-simple-scroller 这个 npm 包来实现这个功能。本文将介绍如何使用这个包。
安装
这个包可以通过 npm 安装。打开终端，进入项目目录，运行以下命令即可安装：
npm install react-simple-scroller
使用
在代码中引入这个包，并创建 Scroller 组件。Scroller 组件会根据传入的数据动态生成列表，当列表超过可见区域时，会自动添加滚动条。
一个最简单的 Scroller 组件的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------------------
----- -------- - -
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
--
-------- ----- -
------ -
----------
-
------------------- ------ -- -
---- ------------------------
--
-
-----------
--
-
------ ------- ----上面的代码中，我们先将列表数据存储在一个数组中，然后在 Scroller 组件中遍历数组，根据数组元素生成列表项。
属性
Scroller 组件有以下属性：
height（必需）：指定 Scroller 组件的高度，可以是数字或字符串，比如 100，'50vh' 等。width：指定 Scroller 组件的宽度。virtualization：当列表较长时，启用虚拟化渲染。默认为 false。overscanCount：虚拟化渲染时，预渲染区域的大小，单位为像素。默认为 10。
其中，height 属性是必需的，其余属性都是可选的。
-- -------------------- ---- -------
---------
------------
-----------
---------------------
------------------
-
-
------------------- ------ -- -
---- ------------------------
--
-
-----------虚拟化渲染
当列表非常长时，如果简单地将所有列表项都渲染出来，会导致性能问题。此时，我们可以通过启用虚拟化渲染，只预渲染可见区域和预渲染区域的列表项，来提高性能。
我们可以将 virtualization 属性设置为 true，其中 overscanCount 属性指定预渲染区域的大小。在列表较长的情况下，这种方式性能明显提高。
结论
使用 react-simple-scroller 可以轻松实现可滚动的列表。要注意的是，在列表较长时，应当启用虚拟化渲染，以提高性能。这个包的使用和配置都很简单，开发者们应该很快就能上手使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005692781e8991b448e4b5a