前言
随着前端技术的不断发展，我们现在能够在浏览器端实现非常复杂的交互效果了。而针对一些比较常见的组件，例如滚动列表，大家也都希望能够使用一些简单的工具来实现。这时，npm 包 react-scrolling-list 就能够为我们提供很好的帮助。
什么是 react-scrolling-list
react-scrolling-list 是一个基于 React 的滚动列表组件，它可以帮助我们方便地实现列表的滚动效果，并且提供了一些自定义的配置选项，能够让我们更好地调整展示效果。
安装和使用
安装
安装 react-scrolling-list 的方式非常简单，只需要在命令行中使用 npm 命令即可。
npm install react-scrolling-list --save
使用
使用 react-scrolling-list 的方式也非常简单。我们只需要在需要使用滚动列表的组件中引入即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
----- ------ - -- -- -
----- ----- - ------ -- -------
------ -
---------------
----------------- -- -
---- -----------------------
---
----------------
--
--
------ ------- -------自定义配置选项
react-scrolling-list 提供了一些自定义配置选项，能够让我们针对不同的需求进行展示效果的调整。
height
height 是滚动列表的高度，它可以接受一个以 px 为单位的数值，也可以是一个百分比值。
<ScrollingList height={300}>
{items.map((item) => (
<div key={item}>{item}</div>
))}
</ScrollingList>rowHeight
rowHeight 是每一行的高度，默认值为 30。
<ScrollingList rowHeight={40}>
{items.map((item) => (
<div key={item}>{item}</div>
))}
</ScrollingList>overscanCount
overscanCount 是缓存区域的行数，它可以缓存离当前可视区域较远的列表项，提高展示性能。默认值为 10。
<ScrollingList overscanCount={20}>
{items.map((item) => (
<div key={item}>{item}</div>
))}
</ScrollingList>总结
react-scrolling-list 是一个非常方便实用的滚动列表组件，它可以极大地提升我们的开发效率，减少不必要的代码量，并且提供了很多自定义选项，能够很好地满足我们不同的需求。在实际开发中，我们可以根据具体需求灵活地使用。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
----- ------ - -- -- -
----- ----- - ------ -- -------
------ -
-------------- ------------ -------------- -------------------
----------------- -- -
---- -----------------------
---
----------------
--
--
------ ------- -------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005722d81e8991b448e8536