reactjs react-intersection-observer 实现虚拟列表

• #reactjs

浏览器有一个叫做 Intersection Observer 的 API，可以用来监听一个元素是否进入了视口，或者是否离开了视口。

比如一个列表有十万行数据，一次性渲染十万行会导致页面卡顿，可以使用 Intersection Observer 来实现虚拟列表，只渲染出现在视口中的行元素，当用户滚动的时候，再渲染新的行元素，隐藏离开视口的行元素。

在 React 中通常会使用第三方库 react-intersection-observer 来实现这个功能。

$ yarn add react-intersection-observer

代码示例

import React from 'react'
import { useInView } from 'react-intersection-observer'

const Row = () => {
  const { ref, inView } = useInView({
    threshold: 0,
  })

  return (
    <div ref={ref} style={{ height: 34 }}>
      {
        inView ? (
            <div>这是一行的数据，可能包含图片或大量字段</div>
        ) : null
      }
    </div>
  )
}

给 div 绑定 ref，当 div 进入视口时，inView 为 true 渲染行数据；离开视口时，inView 为 false 不渲染行数据。

↶ 返回首页 ↶