请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

换日线

注册会员

7

主题

17

帖子

66

积分

注册会员

积分
66
换日线
注册会员   /  发表于:2024-2-6 09:46  /   查看:284  /  回复:3
10金币
本项目为react项目。
由服务端返回应渲染的数据。
拿到数据后存储于父组件的useState中,该数据为一个对象数组(detailData)。该数组得到值后便进行遍历渲染多个SpreadSheets表格(即多个Content组件),并将该表的数据值传入。如下图
image.png232242430.png
data为每个content的数据源。
content结构如下图:
image.png925737914.png

拿到data数据源后会将其使用setDataSource绑定数据源,然后每个SpreadSheets中会绑定一个table,设定table的字段,以此来将数据渲染于表格中(并且表格样式渲染较多)。

问题:
1、当服务端返回的数据量过于庞大,需要渲染几十个Content组件,即渲染几十个SpreadSheets并各自绑定table,且每个table拥有成百上千条数据,这样的结构初始化渲染时间十分漫长,请问这种情况可以怎么处理呢?
2、如第一张图所示,我将传递一个名为filterInfo的属性进入content组件,该属性为父组件中的state数据,如下图,当filterInfo发生变化时,在content组件中使用useEffect进行监听,发现数据量庞大的时候总会卡顿,似乎在进行什么渲染,在此此渲染结束之后才会打印监听到的值,如果进行相应操作就会造成页面的卡顿,数据越多,卡顿越明显,请问这种只要是由useState绑定并且传递给Content组件的值发生变化,页面便会卡顿的问题有无解决方案呢?
(目前只传递了一个filterInfo,但是实际业务中会传递更多属性,并且遍历的源数据(detailData)也有会变化的情况)
image.png508202514.png

3 个回复

倒序浏览
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2024-2-6 17:37:02
沙发
您好:

1、页面中渲染大量的SpreadJS对象是非常消耗性能的,您可以考虑不要使用多个SpreadSheets,而是将表格放在一个SpreadJS对象中,降低性能的消耗。

2、filterInfo具体影响了SpreadJS的哪一部分呢?看上去应该是用作筛选,也就是说每次更新filterInfo都会使得SpreadJS重新根据筛选条件进行筛选吗?

如果是的话,这个是会造成一定程度上的性能影响,因为前端的性能有限,没有更好的方法可以提高性能,或者您也可以尝试降低页面中的数据量,一次性少渲染一些数据,也可以起到提升性能的效果。
回复 使用道具 举报
换日线
注册会员   /  发表于:2024-2-6 17:56:06
板凳
本帖最后由 换日线 于 2024-2-6 18:00 编辑
Joestar.Xu 发表于 2024-2-6 17:37
您好:

1、页面中渲染大量的SpreadJS对象是非常消耗性能的,您可以考虑不要使用多个SpreadSheets,而是 ...

您好,我的数据结构大致是这样的

image.png964137878.png
目前的操作:
我目前设定的是图中大红框为一个SpreadSheet,实际业务中会遍历产生多个,然后将其作为数据源绑定,后根据dataSource字段绑定到table上渲染数组。
因为这样我比较好做样式渲染和合并单元格处理,理想效果如下图:
image.png548807982.png
每一个红框为一个SpreadSheet,并且点击前三列单元格,会对子级数据行做显示行和隐藏行操作。
请问如果使用一个SpreadSheet的话,有没有什么比较好的方式实现呢
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-2-7 11:24:54
地板
这种情况没必要用多个Spread对象,在一个sheet中用table的数据绑定,不同的table设置不同的bindingpath即可,但注意的就是要将所有的数据整合到一个dataSource中。

还有另外一种方式就是使用V17的新功能reportsheet来完成上述操作。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部