react antDesign hook 大数据表格虚拟滚动
<h4 id="业务使用">业务使用</h4><pre><code>// 使用虚拟列表
const virtualComponents = useVirtualTable({
height: 350 // 设置可视高度
})
const components = useMemo(() => {
return {
body: {
wrapper: virtualComponents.body.wrapper
},
table: virtualComponents.table
}
}, [ virtualComponents])
return (
<div className='commonTable' id='tablePart'>
<Table
{...otherProps}
components={components}
/>
</div>
)
</code></pre>
<h4 id="hook">hook</h4>
<pre><code>/* eslint-disable no-case-declarations */
import React, { useRef, useEffect, useContext, createContext, useReducer, useState, useMemo } from 'react'
import { throttle, isNumber } from 'lodash'
interface initialStateProps {
rowHeight: number
curScrollTop: number
scrollHeight: number
tableScrollY: number
}
const initialState: initialStateProps = {
// 行高度
rowHeight: 40,
// 当前的scrollTop
curScrollTop: 0,
// 可滚动区域的高度
scrollHeight: 0,
// scrollY值
tableScrollY: 0
}
function reducer(state: initialStateProps, action: { type: string; : any }) {
switch (action.type) {
// 改变trs 即 改变渲染的列表trs
case 'changeTrs':
// 获取值
let curScrollTop = action.curScrollTop
let scrollHeight = action.scrollHeight
let tableScrollY = action.tableScrollY
if (scrollHeight <= 0) {
scrollHeight = 0
}
if (state.scrollHeight !== 0) {
if (tableScrollY === state.tableScrollY) {
scrollHeight = state.scrollHeight
}
}
if (state.scrollHeight && curScrollTop > state.scrollHeight) {
curScrollTop = state.scrollHeight
}
return {
...state,
curScrollTop,
scrollHeight,
tableScrollY
}
case 'reset':
return {
...state,
curScrollTop: 0,
scrollHeight: 0
}
default:
throw new Error()
}
}
interface ScrollContextProps {
dispatch: undefined | ((arg: { type: string; : any }) => void)
renderLen: number
start: number
offsetStart: number
rowHeight: number
totalLen: number
}
const ScrollContext = createContext<ScrollContextProps>({
dispatch: undefined,
renderLen: 1,
start: 0,
offsetStart: 0,
rowHeight: 40,
totalLen: 0
})
let scrollY: number | string = 0
function VWrapper(props: any): JSX.Element {
const { children, ...restProps } = props
const { renderLen, start, offsetStart } = useContext(ScrollContext)
let contents = children
let tempNode = null
if (Array.isArray(contents) && contents.length) {
tempNode = [
children,
contents.slice(start, start + renderLen).map(item => {
if (Array.isArray(item)) {
// 兼容antd v4.3.5 --- rc-table 7.8.1及以下
return item
} else {
// 处理antd ^v4.4.0--- rc-table ^7.8.2
return item
}
})
]
} else {
tempNode = children
}
return (
<tbody {...restProps} style={{ transform: `translateY(-${offsetStart}px)` }}>
{tempNode}
</tbody>
)
}
function VTable(props: any): JSX.Element {
const { style, children, ...rest } = props
const { width, ...restStyle } = style
const = useReducer(reducer, initialState)
const wrapTableRef = useRef<HTMLDivElement>(null)
const tableRef = useRef<HTMLTableElement>(null)
// 数据的总条数
const = useState<number>(children?.props?.data?.length ?? 0)
useEffect(() => {
if (isNumber(children?.props?.data?.length)) {
setTotalLen(children?.props?.data?.length)
}
}, )
// table总高度
const tableHeight = useMemo<string | number>(() => {
let temp: string | number = 'auto'
if (state.rowHeight && totalLen) {
temp = state.rowHeight * totalLen + 10
}
return temp
}, )
// table的scrollY值
let tableScrollY = 0
if (typeof scrollY === 'string') {
tableScrollY = (wrapTableRef.current?.parentNode as HTMLElement)?.offsetHeight
} else {
tableScrollY = scrollY
}
if (isNumber(tableHeight) && tableHeight < tableScrollY) {
tableScrollY = tableHeight
}
// 处理tableScrollY <= 0的情况
if (tableScrollY <= 0) {
tableScrollY = 0
}
// 渲染的条数
const renderLen = useMemo<number>(() => {
let temp = 1
if (state.rowHeight && totalLen && tableScrollY) {
if (tableScrollY <= 0) {
temp = 0
} else {
let tempRenderLen = ((tableScrollY / state.rowHeight) | 0) + 1 + 2
// console.log('tempRenderLen', tempRenderLen)
temp = tempRenderLen > totalLen ? totalLen : tempRenderLen
}
}
return temp
}, )
// 渲染中的第一条
let start = state.rowHeight ? (state.curScrollTop / state.rowHeight) | 0 : 0
// 偏移量
let offsetStart = state.rowHeight ? state.curScrollTop % state.rowHeight : 0
// 用来优化向上滚动出现的空白
if (state.curScrollTop && state.rowHeight && state.curScrollTop > state.rowHeight) {
if (start > totalLen - renderLen) {
// 可能以后会做点操作
offsetStart = 0
} else if (start > 1) {
start = start - 1
offsetStart += state.rowHeight
}
} else {
start = 0
}
useEffect(() => {
// totalLen变化, 那么搜索条件一定变化, 数据也一定变化.
let parentNode = wrapTableRef.current?.parentNode as HTMLElement
if (parentNode) {
parentNode.scrollTop = 0
}
dispatch({ type: 'reset' })
}, )
useEffect(() => {
const throttleScroll = throttle(e => {
const scrollTop: number = e?.target?.scrollTop ?? 0
if (scrollTop !== state.curScrollTop) {
const scrollHeight = e.target.scrollHeight - tableScrollY
dispatch({
type: 'changeTrs',
curScrollTop: scrollTop,
scrollHeight,
tableScrollY
})
}
}, 60)
const ref = wrapTableRef?.current?.parentNode as HTMLElement
if (ref) {
ref.addEventListener('scroll', throttleScroll)
}
return () => {
ref.removeEventListener('scroll', throttleScroll)
}
}, )
return (
<div
className='virtuallist'
ref={wrapTableRef}
style={{
width: '100%',
position: 'relative',
height: tableHeight,
boxSizing: 'border-box',
paddingTop: state.curScrollTop
}}
>
<ScrollContext.Provider
value={{
dispatch,
rowHeight: state.rowHeight,
start,
offsetStart,
renderLen,
totalLen
}}
>
<table
{...rest}
ref={tableRef}
style={{
...restStyle,
width,
position: 'relative'
}}
>
{children}
</table>
</ScrollContext.Provider>
</div>
)
}
export default function useVirtualTable(props: { height: number | string }): any {
scrollY = props.height
return {
table: VTable,
body: {
wrapper: VWrapper
}
}
}
</code></pre><br><br>
来源：https://www.cnblogs.com/mapleChain/p/14110749.html
頁:
[1]