react 虚拟滚动

最新推荐文章于 2025-03-11 10:30:44 发布

在座的各位都是菜杯

最新推荐文章于 2025-03-11 10:30:44 发布

阅读量1.1k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/coderYYA/article/details/123078062

版权

本文介绍了如何在React项目中使用rc-virtual-list库实现高效虚拟滚动，以优化大量数据渲染性能。通过yarn添加依赖后，详细探讨了该库的使用方法和关键配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

yarn add rc-virtual-list

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { PlayScreen } from './style'

import { PlayCircleFilled, DeleteOutlined } from '@ant-design/icons'

import {
	changeCurrentIndexAction,
	removeSongList,
	GetSongLyric,
	clearSongList,
} from '../store/createActionType'
// 时间格式化函数
import VirtualList from 'rc-virtual-list'
import 'react-virtualized/styles.css'; 
import { formatMinuteSecond } from '../../../assets/js/format-utils'
// 全局变量
import '../global'

class Index extends PureComponent {
	// 歌词所在的位置
	isPosition = React.createRef()
	// 歌词内容
	isContent = React.createRef()
	// 左边栏列表高度
	isSongs = React.createRef()

	state = {
		currentIndex: -1,
	}

	// 组件挂载函数
	componentDidMount() {
		// 初始化时确保滚动位置同步
		// 控制右侧歌词滚动位置

		this.isPosition.current &&
			this.isContent.current.scrollTo(0, this.isPosition.current.offsetTop)
		// 控制左侧歌曲列表滚动位置

		this.isSongs.current &&
			this.isSongs.current.scrollTo({
				index: this.props.currentIndex,
				offset: 150,
				align: 'auto',
			})
	}
	// 组件更新函数
	componentDidUpdate(preVal) {
		if (preVal.currentNumber !== this.props.currentNumber) {
			// 控制右侧歌词滚动位置

			this.isPosition.current &&
				this.isContent

最低0.47元/天解锁文章