怎么样给自己做网站,甜品店网站建设,为什么选择当网站设计人员,中国建设银行网站首页joy[React]如何提高大数据量场景下的Table性能#xff1f;
两个方向#xff1a;虚拟列表#xff0c;发布订阅
虚拟列表
虚拟列表实际上只对可视区域的数据项进行渲染
可视区域#xff08;visibleHeight#xff09;: 根据屏幕可视区域动态计算或自定义固定高度数据渲染项
两个方向虚拟列表发布订阅
虚拟列表
虚拟列表实际上只对可视区域的数据项进行渲染
可视区域visibleHeight: 根据屏幕可视区域动态计算或自定义固定高度数据渲染项visibleCount可视区域除以行高并向下取整startIndex: 初始为0听过滚动条偏移计算endIndex: startIndex visibleCount; 数据结束位置索引可额外预加载几条数据
实现思路
监听逻辑实现 useEffect(() {const onScrollChange (e: React.WheelEvent) {const top (e.target as HTMLElement).scrollTopconst index Math.floor(top / rowHeight)setScrollTop(top)setStartIndex(index ? index 1 : 0)}virtualizedRef.current.addEventListener(scroll, onScrollChange)return () {if (virtualizedRef.current) {virtualizedRef.current.removeEventListener(scroll, onScrollChange)}}}, [])
HTML结构如下
virtualized_placeholder: 容器内占位高度为列表总高度撑满父容器用于可视区域形成滚动条
div ref{virtualizedRef} style{{ height: visibleHeight }}table style{{ transform: translate3d(0px, ${scrollTop}px, 0) }}thead{...}/theadtbody{...}/tbody/tablediv classNamevirtualized_placeholder style{{ height: placeHeight }} //div主要逻辑
设置容器占位高度计算可视区域数据项监听容器滚动事件计算偏移距离startIndex组件卸载移除滚动事件startIndex作为deps依赖项当发生改变更新展示数据
useEffect(() {const placeH ((dataSource.length) * rowHeight) rowHeightsetPlaceHeight(placeH)setVisibleCount(Math.floor(visibleHeight / rowHeight) 2)}, [dataSource, rowHeight])useEffect(() {const onScrollChange (e: React.WheelEvent) {const top (e.target as HTMLElement).scrollTopconst index Math.floor(top / rowHeight)setScrollTop(top)setStartIndex(index ? index 1 : 0)}virtualizedRef.current.addEventListener(scroll, onScrollChange)return () {if (virtualizedRef.current) {virtualizedRef.current.removeEventListener(scroll, onScrollChange)}}}, [])useEffect(() {const data dataSource.slice(startIndex, startIndex visibleCount)setShowData(data)}, [startIndex, visibleCount, dataSource])完整代码
/*** dataSource 数据数组 object[]* columns 表格列 string[]* rowKey 表格行key的取值 number | string* rowHeight tr固定高度 number* visibleHeight 可视区域高度 number* hasOrder 是否含有序号 boolean* orderTitle 序号标题 string*/
import React, { FC, useEffect, useState, useRef, memo } from react
import { Empty } from antd;
import ./index.lessinterface DataProps {[key:string]: any
}
interface VirtualProps {dataSource: DataProps[]columns: string[]rowKey?: number | stringhasOrder?: booleanorderTitle?: stringrowHeight?: numbervisibleHeight?: number
}const Index: FCVirtualProps (props) {const {dataSource [],columns [],rowKey,hasOrder false,orderTitle 序号,rowHeight 40,visibleHeight 800,} propsconst [startIndex, setStartIndex] useState(0)const [placeHeight, setPlaceHeight] useState(0)const [scrollTop, setScrollTop] useState(0)const [visibleCount, setVisibleCount] useState(0)const [showData, setShowData] useStateDataProps[]([])const virtualizedRef useRefany(null)useEffect(() {const placeH ((dataSource.length) * rowHeight) rowHeightsetPlaceHeight(placeH)setVisibleCount(Math.floor(visibleHeight / rowHeight) 2)}, [dataSource, rowHeight])useEffect(() {const onScrollChange (e: React.WheelEvent) {const top (e.target as HTMLElement).scrollTopconst index Math.floor(top / rowHeight)setScrollTop(top)setStartIndex(index ? index 1 : 0)}virtualizedRef.current.addEventListener(scroll, onScrollChange)return () {if (virtualizedRef.current) {virtualizedRef.current.removeEventListener(scroll, onScrollChange)}}}, [])useEffect(() {const data dataSource.slice(startIndex, startIndex visibleCount)setShowData(data)}, [startIndex, visibleCount, dataSource])return (div classNamegalois_virtualized_container ref{virtualizedRef} style{{ height: visibleHeight }}tablestyle{{ transform: translate3d(0px, ${scrollTop}px, 0) }}classNamegalois_virtualized_tabletheadtr{hasOrder th keygalois_index{orderTitle}/th}{columns.map(values th key{values}{values}/th)}/tr/theadtbody{showData.map((item, index) (tr key{rowKey ? item[rowKey] : index}{hasOrder td{startIndex index 1}/td}{columns.map((values, ind) td key{ind}{item[values]}/td)}/tr))}/tbody/table{showData.length 0 Empty image{Empty.PRESENTED_IMAGE_SIMPLE} /}div classNamegalois_virtualized_placeholder style{{ height: placeHeight }} //div)
}export default memo(Index)
利用发布订阅模式优化批量编辑的场景
正常情况下来说把整个表格的数据都挂载到一个state中是最简单的但是这么做的话每次单元格在编辑onChange的时候就会setState从而更新整个table在数据稍大的场景下编辑的性能会非常低用户每输入一个字都要rerender。
发布订阅可以帮我们去掉这一部分冗余的rerender从而做到每个cell的onChange都是单独的。
预期下的单元格状态维护
每个cell都进行单独的状态管理每个cell内部都是用
const [data, setData] useState(defaultValue)return Input value{data} onChange{(e)setData(e.target.value)}/来维护内容这样的话即使onChange也只是rerender这个单独的cell不会影响到整个table。
发布订阅实现
export interface IRef {id: string[key: string]: any
}// 发布订阅模式
export class RefCollection {// 订阅者集合private refMap: Mapstring, IRefconstructor() {this.refMap new Mapstring, IRef()}// 添加订阅者public addRef(ref: IRef) {if (!this.refMap.has(ref.id)) {this.refMap.set(ref.id, ref)}}// 移除订阅者public removeRef(ref: IRef) {this.refMap.delete(ref.id)}// -----------------------下面是广播事件----------------------------------// 触发所有deps的submit方法public submit() {return Array.from(this.refMap.values()).map((oneRef {return oneRef.submit?.()}))}// 触发所有deps的validate方法public validate() {return Array.from(this.refMap.values()).map((oneRef {return oneRef.validate?.()}))}// ...其它
}
收集每个单元格的依赖
业务组件内
// 注册一个收集器
const refCollection useRef(new RefCollection())const columns [{dataIndex: title,render(){return Cell refCollection{refCollection}/}}
]单元格内部逻辑
// 每一个Cell内const Cell (props){const { refCollection } props// 每一个Cell内部自己实现接口逻辑独立只需关注自己即可const ref useRefany({// 当前单元格的唯一标识id: uid()// 这里随便加什么属性可以加一些type来区别不同的Cell// 比如说有些是Select的控件有些是Input的控件// 在submit的时候就可以根据type来过滤收集type: inputRender,// 一般来说可能要给定一个行号因为我们提交数据的时候都是按行提交的// 有了行ID之后我们可以在submit的时候聚合数据转换成需要提交的格式tableRowId: row?.tableRowId,validate: useMemoizedFn(() {// 在这里实现自己的validate方法 // refCollection执行validate的时候会遍历每一个订阅者的validate方法// return boolean}),submit: useMemoizedFn(() {// 在这里实现自己的submit方法// refCollection执行validate的时候会遍历每一个订阅者的submit方法// return {}}),})// 在这里收集依赖useEffect(() {if (!refCollection) returnrefCollection?.add(ref.current)return () {refCollection?.remove(ref.current)}}, [])return div/div
}
提交阶段 const refCollection useRef(new RefCollection())const onSubmit (){await refCollection.current.validateAll()const data refCollection.current.submit()// 提交逻辑 data
}
为什么不用FormItem
FormItem包含了其它很多逻辑但是未必都需要用得上如果一个单元格就要多渲染一层FormItem整体下来就会非常地损耗性能FormItem如果不渲染出来那么就无法做逻辑而如果通过统一的状态管理可以实现字段不渲染出来就能完成值的读取和修改实现虚拟字段的效果这时候可以搭配分页、虚拟列表提高性能同时也能正常地兼顾一些联动操作比如说表格数字汇总
