在React中将大数据加载为网格和表格（使用react-window）

Question

我有一个带有起始页的项目，它显示用户的整个项目列表。 用户可以在网格和表格之间切换。

对于网格，我使用 CSS 网格

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 2px;
  align-items: stretch;
  justify-items: stretch;

对于表格，我使用 Material UI 的 Table、TableCell、TableRow、TableHead 和 TableBody 组件。

现在我想找到一种好方法来渲染大数据的网格/表格。到目前为止，我有一个加载屏幕，该屏幕在加载所有数据后完成。这太花时间了。

我找到了react-window或react-virtualized和react-virtualized-autosizer，但无法让它工作。是否有响应式 CSS 网格和表格的示例，但您不知道项目的宽度和高度？

谢谢您的帮助！

Answer 1

我的解决方案：

import React from 'react'

interface LazyRenderProps {
  visibleOffset?: number
}

const LazyRender: React.FC<React.PropsWithChildren<LazyRenderProps>> = (
  {
    children,
    visibleOffset = 0,
  },
) => {
  const [isVisible, setIsVisible] = React.useState<boolean>(false)
  const intersectionRef = React.useRef<HTMLDivElement | null>(null)

  React.useEffect(() => {
    const $i = intersectionRef.current
    if (!$i) return

    const observer = new IntersectionObserver(
      entries => {
        if ( window.requestIdleCallback) {
          window.requestIdleCallback(
            () => setIsVisible(entries[0].isIntersecting),
            {
              timeout: 600
            }
          )
        } else {
          setIsVisible(entries[0].isIntersecting)
        }
      },
      {
         rootMargin: `${visibleOffset}px 0px ${visibleOffset}px 0px`,
      }
    )
    observer.observe($i)

    return () => {
      if ($i) {
        observer.unobserve($i)
      }
    }
  }, [visibleOffset])


  return (
    <div ref={intersectionRef} style={{ height: '100%', width: '100%' }}>
      {
        isVisible ? children : null
      }
    </div>
  )
}

export default LazyRender