React虚拟列表的实现代码

export type UseVirtualListOptions = {
	// 如果是每条数据的高度相同为number 否则通过方法计算高度
	itemHeight: number | ((index: number) => number);
	overscan?: number;
};
export const useVirtualList = (
	list: AllItems[],
	options: UseVirtualListOptions
): UseVirtualListReturn => {
	const containerRef = useRef(null);
	const [currentList, setCurrentList] = useState<CurrentList[]>([]);
	const [wrapperStyle, setWrapperStyle] = useState({
		width: "100%",
		height: "0px",
		marginTop: "0px",
	});
	return {
		list: currentList,
		containerProps: {
			ref: containerRef,
			onScroll: () => {},
		},
		scrollTop,
		wrapperStyle,
	};
};

const getViewCapacity = (containerHeight: number) => {
	if (typeof itemHeight === "number") {
		return Math.ceil(containerHeight / itemHeight);
	}
	let sum = 0;
	let capacity = 0;
	const { start = 0 } = state;
	console.log(start);
	for (let i = start; i < list.length; i++) {
		const height = itemHeight(i);
		sum += height;
		if (sum >= containerHeight) {
			capacity = i;
			break;
		}
	}
	return capacity - start;
};

const getOffset = (scrollTop: number) => {
	if (typeof itemHeight === "number") {
		return Math.floor(scrollTop / itemHeight) + 1;
	}
	let sum = 0;
	let offset = 0;
	for (let i = 0; i < list.length; i++) {
		const height = itemHeight(i);
		sum += height;
		if (sum >= scrollTop) {
			offset = i;
			break;
		}
	}
	return offset + 1;
};

const from = offset - overscan;
const to = offset + viewCapacity + overscan;
state.start = from < 0 ? 0 : from;
state.end = to > list.length ? list.length : to;
setCurrentList(() => {
	return list.slice(state.start, state.end).map((ele, index) => ({
		data: ele,
		index: index + state.start,
	}));
});

const computedWrapperStype = () => {
	const offsetTop = getDistanceTop(state.start);
	setWrapperStyle({
		width: "100%",
		height: `${totalHeight() - offsetTop}px`,
		marginTop: `${offsetTop}px`,
	});
};

const scrollTop = (index: number) => {
	if (containerRef.current) {
		(containerRef.current as HTMLDivElement).scrollTop = getDistanceTop(index);
		calculateRange();
	}
};