什么是 Virtual Scroller？
在常规的 Web 应用程序开发中，如果需要展示非常多的列表数据，此时通常可能会遇到以下问题：
- 应用程序变得缓慢： 长列表可能会导致应用程序变得缓慢，因为它们需要加载大量的 DOM 元素，其中很多可能看起来并不需要呈现。
- 内存占用过高： 如果 DOM 中存在许多隐藏的元素，则会让浏览器的内存加剧负担，因为它们必须保持在内存中以便随时使用。
Virtual Scroller 是解决这些问题的一种方法，它可以动态地创建和删除 DOM 元素，以使只有当前可见的元素保留在内存和 DOM 中。
@minedeljkovic/react-virtual-scroller 是什么？
@minedeljkovic/react-virtual-scroller 是一个 React 组件，用于实现 Virtual Scroller 功能。使用这个组件，您可以轻松地优化您的 React 应用程序的长列表性能。您可以使用它来构建包含数千个行或列的表格，或者包含优先级项的列表等。
如何使用 @minedeljkovic/react-virtual-scroller？
安装
您可以使用 NPM 来安装 @minedeljkovic/react-virtual-scroller 包：
npm install @minedeljkovic/react-virtual-scroller --save
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- ----------------------------------------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
-- ---- --- ---- -- -------- ---- -----
----- ----- - -- --- -- ----- ----- -- -- - --- -- ----- ----- -- -- - --- -- ----- ----- -- ---
--------------- ----- ---
-
-------- -
----- - ----- - - -----------
------ -
----------------
-------------
---------------
------------------ -- ---- --------------------------------
--
--
-
-在这个示例中，我们首先从 API 中获取列表项，然后将它们存储在组件的状态中。接下来，我们将 VirtualScroller 组件渲染到页面中，并将 items 作为 props 传递给组件。我们还定义了每个项的固定高度，以及一个渲染函数，用于呈现每个列表项。渲染函数是根据列表项生成的，可以使用任何有效的 JSX 元素。
如何优化您的 Virtual Scroller？
了解你的数据
在 Virtual Scroller 中使用一个固定的项高度，如果您的数据有很多不同高度的项目，可能会浪费大量的空间。因此，了解您的数据并使用适当的高度是很重要的。
物理滚动和容器高度
Virtual Scroller 内部使用一个羽毛对象来判断哪些元素应该呈现在屏幕上。对于一些 Vritual Scrollers，如果您的容器高度不是固定的，则可能存在一些性能问题。建议将 Virtual Scroller 包裹在确定高度的容器中，以获得最佳性能。
优化数据加载
如果您的应用程序需要在 Virtual Scroller 内部加载数据，那么您应该尽量优化数据加载。强烈建议以小块的方式加载数据，而不是一次性全部加载。这将有助于确保列表在滚动时仍然保持响应。
总结
@minedeljkovic/react-virtual-scroller 是一个能够优化长列表性能的 React 组件。通过了解您的数据并使用适当的大小、物理滚动和锁定高度的容器，可以最大程度地发挥其潜力。在处理大量列表数据时使用它会成为您的好选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/134464