掌握分片渲染和虚拟列表，让你的应用飞起来

2024-02-13 07:10:55

对于前端开发者来说，处理高性能和大数据量列表渲染是一个至关重要的技能。分片渲染和虚拟列表是实现流畅且高效的列表视图的关键技术。在这篇文章中，我们将从头开始编写代码，一步一步地掌握这些强大的技术。

分片渲染：拆分列表以提高性能

分片渲染是一种将长列表拆分成更小片段的技术。这可以防止页面因大量元素的渲染而冻结。

示例代码：

const renderChunk = (chunk) => {
  return chunk.map(item => {
    return <li key={item.id}>{item.name}</li>
  })
}

const renderList = (data) => {
  const chunkSize = 100
  const chunks = _.chunk(data, chunkSize)
  return chunks.map((chunk, index) => {
    return <div key={index}>{renderChunk(chunk)}</div>
  })
}

虚拟列表：仅渲染可见部分

虚拟列表是一个只渲染用户当前可见部分的列表组件。这可以大大减少渲染时间，尤其是对于超长列表。

示例代码：

const VirtualList = ({data}) => {
  const [startIndex, setStartIndex] = useState(0)
  const [endIndex, setEndIndex] = useState(100)

  const renderRow = (item) => {
    return <li key={item.id}>{item.name}</li>
  }

  const scrollHandler = (e) => {
    const scrollTop = e.target.scrollTop
    const scrollHeight = e.target.scrollHeight
    const clientHeight = e.target.clientHeight

    if (scrollTop + clientHeight >= scrollHeight) {
      setEndIndex(endIndex + 100)
    } else if (scrollTop === 0) {
      setStartIndex(0)
      setEndIndex(100)
    }
  }

  return (
    <div onScroll={scrollHandler}>
      {data.slice(startIndex, endIndex).map(renderRow)}
    </div>
  )
}