react 虚拟滚动

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.current.scrollTo(0, this.isPosition.current.offsetTop)
			// 控制左侧歌曲列表	滚动位置
			// console.log(this.isSongs)
			if (this.props.currentNumber <= 1 && this.props.songList.length) {
				this.isSongs.current.scrollTo({
					index: this.props.currentIndex,
					offset: 150,
					align: 'auto',
				})
			}
		}
	}
	// 点击播放按钮，播放歌曲
	playSong = (index) => {
		console.log(index)
		this.props.playSong(index)
	}
	// 鼠标移入，添加类名效果
	mouseEnter = (index) => {
		this.setState({
			currentIndex: index,
		})
	}
	// 鼠标移出，移除类名效果
	mouseLeave = () => {
		this.setState({
			currentIndex: -1,
		})
	}
	removeSong = (index, song) => {
		if (this.props.songList.length === 1) {
			this.props.handlePause()
			global.lyricArray = []
			this.props.removeSongList(0, song.id)
		} else {
			if (this.props.currentIndex > index) {
				this.props.changeCurrentIndex(this.props.currentIndex - 1)
			} else if (this.props.currentIndex === index) {
				if (this.props.songList[index + 1]) {
					this.props.changeSongLyric(this.props.songList[index + 1].id)
					this.playSong(index)
				} else {
					this.playSong(0)
				}
			}
			this.props.removeSongList(index, song.id)
		}
	}

	clearSongList = () => {
		// 将播放按钮变成暂停态
		this.props.handlePause()
		// 执行action函数，清空列表
		this.props.clearSongList()
	}

	// 渲染
	render() {
		const { songList, currentIndex, currentNumber } = this.props
		return (
			<PlayScreen>
				<div className="main_left">
					<div className="tital">
						<span>播放列表({songList.length})</span>
						<span className="clearSongList" onClick={this.clearSongList}>
							{songList.length ? '清除' : null}
						</span>
					</div>

					<VirtualList
						data={songList}
						height={308}
						itemHeight={28}
						itemKey="id"
						className="songs scroll"
						ref={this.isSongs}
						// onScroll={onScroll}
					>
						{(item, index) => (
							<div
								className={
									'songList' +
									' ' +
									(currentIndex === index
										? 'deepBlue'
										: this.state.currentIndex === index
										? 'shallowBlue'
										: '')
								}
								key={item.id}
								onDoubleClick={() => this.playSong(index)}
								onMouseEnter={() => this.mouseEnter(index)}
								onMouseLeave={() => this.mouseLeave(index)}
							>
								<div className="play_icon">
									{currentIndex === index ? (
										<PlayCircleFilled
											className="orange"
											onClick={() => this.playSong(index)}
										/>
									) : this.state.currentIndex === index ? (
										<PlayCircleFilled
											className="white"
											onClick={() => this.playSong(index)}
										/>
									) : null}
								</div>

								<span className="song">{item.name}</span>
								<span className="singer">{item.ar[0].name}</span>
								<span className="duration">{formatMinuteSecond(item.dt)}</span>
								<div className="removeBox">
									<DeleteOutlined
										className={
											'remove ' +
											(this.state.currentIndex === index ? 'isRemoveShow' : '')
										}
										onClick={() => this.removeSong(index, item)}
									></DeleteOutlined>
								</div>
							</div>
						)}
					</VirtualList>
				</div>
				<div className="main_right ">
					{/* 歌名区域 */}
					<div className="song_name ">
						{songList[currentIndex] && songList[currentIndex].name}
					</div>
					{/* 歌名区域  end*/}
					{/* 歌词区域 */}
					<div className="lyric scroll" ref={this.isContent}>
						<div className="content">
							{global.lyricArray.length ? (
								global.lyricArray.map((item, index) => {
									return (
										<p
											key={index}
											className={
												currentNumber === index + 1 ? 'isActive' : null
											}
											ref={currentNumber === index + 1 ? this.isPosition : null}
										>
											{item.content}
										</p>
									)
								})
							) : (
								<p className="isActive">网易云Music,用心做好音乐</p>
							)}
						</div>
					</div>
				</div>
				{/* 歌词区域 end*/}
			</PlayScreen>
		)
	}
}

const mapStateToProps = (state) => ({
	songList: state.songList.toJS(),
	currentIndex: state.songsDetail.getIn(['currentIndex']),
})

function mapDispatchToProps(dispatch) {
	return {
		changeCurrentIndex: (index) => dispatch(changeCurrentIndexAction(index)),
		removeSongList: (index, id) => dispatch(removeSongList(index, id)),
		changeSongLyric: (id) => dispatch(GetSongLyric(id)),
		clearSongList: () => dispatch(clearSongList()),
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)