一个微小的 react 钩子，用于像微风一样渲染大型数据集。

特征

• 使用dom 回收以高性能方式渲染数百万个项目。
• 易于使用，基于 React hook。
• 轻松应用样式，只需少量设置。
• 支持固定、可变、动态和实时高度/宽度。
• 支持响应式网页设计 (RWD)以获得更好的用户体验。
• 支持用于构建趋势列表的粘性标题。
• 内置加载更多回调供您处理无限滚动+骨架屏幕。
• 用于偏移、项目和对齐的命令式滚动到方法。
• 开箱即用的平滑滚动，效果可 DIY。
• 可以为聊天、提要等实现坚持底部和预先挂起的项目。
• 提供isScrolling指示给您UI占位符或性能优化。
• 支持服务器端渲染 (SSR)以实现快速FP + FCP和更好的seo。
• 支持TypeScript类型定义。
• 超级灵活的api设计，考虑到 DX。
• 小尺寸（~ 3kB gzipped）。除了react.

安装

$ yarn add react-cool-virtual
# or
$ npm install --save react-cool-virtual

基本用法

import useVirtual from "react-cool-virtual";

const List = () => {
  const { outerRef, innerRef, items } = useVirtual({
    itemCount: 10000, // Provide the total number for the list items
    itemSize: 50, // The size of each item (default = 50)
  });

  return (
    <div
      ref={outerRef} // Attach the `outerRef` to the scroll container
      style={{ width: "300px", height: "500px", overflow: "auto" }}
    >
      {/* Attach the `innerRef` to the wrapper of the items */}
      <div ref={innerRef}>
        {items.map(({ index, size }) => (
          // You can set the item's height with the `size` property
          <div key={index} style={{ height: `${size}px` }}>
            {index}
          </div>
        ))}
      </div>
    </div>
  );
};

链接: https://fly63.com/nav/3431