Table大数据渲染—丝般顺滑(一)

@whizbz11 2018-12-21 15:12:12发表于 iuap-design/blog

Table大数据渲染—丝般顺滑(一)

最近在搞一个大数据渲染功能,一次性渲染1W条数据,要求丝般顺滑。先来看看具体的效果,这个是左右为固定列,1W条数据的展示。
Alt text
下面是我具体的实现逻辑。目标还是很明确的。肯定是懒加载数据,动态显示。

  • 模拟万条数据的假象正确显示滚动条
    假定页面中展示的数据为20条,那如何模拟万条数据呢,我想要么自己编写个假的滚动条、要么行前和行尾编写tr占位符。相比较第二种跟兼容性、效率更好些。ok,看下具体的实现。
    Alt text
    第一行高度值为0到startIndex乘以行高,最后一行高度为endIndex到data.length直接的高度,这样就模拟出万行数据了,是不是很简单。
  • 滚动滚动条时,需要动态拉取最新的数据
    滚动时,会有一个回调函数,参数为当前的表格srollTop。根据这个值要动态计算当前定位的索引currentIndex,最新数据则为currentIndex,currentIndex+rowsInView。看下具体的handleScroll方法实现
 handleScroll = (scrollTop)=> {
        const {data,height} = this.props;
        const rowHeight = height?height:defaultHeight;
        const {currentIndex} = this.state;
        let index = 0;
        let temp = scrollTop;
        //根据scroolTop动态计算当前索引位置
        while (temp > 0) {
          temp -= this.cachedRowHeight[index] || rowHeight
          if(temp > 0){
            index += 1
          }
        }
        if (index < 0) index = 0
        if(currentIndex !== index){
            this.setState({ currentIndex: index ,scrollTop:scrollTop})
        }
    }

//Table渲染
 <Table
    {...this.props}
     data={data.slice(currentIndex, currentIndex + rowsInView)}
     lazyLoad={lazyLoad}
     handleScroll={this.handleScroll}
     scrollTop={scrollTop}
     setRowHeight={this.setRowHeight}
   />

这样基本上就实现一个万条数据Table。这里有一个点需要注意,一进来其实我们并不知道每行的高度,所以有个默认高度,当每行数据渲染完,会调用setRowHeight,将行高缓存起来,下一次计算时,就按真实高度计算。