初始化SpreadSheets绑定table渲染速度慢，导致页面卡顿。

Clark.Pan

本项目为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

Clark.Pan · Clark.Pan

这种情况没必要用多个Spread对象，在一个sheet中用table的数据绑定，不同的table设置不同的bindingpath即可，但注意的就是要将所有的数据整合到一个dataSource中。

还有另外一种方式就是使用V17的新功能reportsheet来完成上述操作。

Joestar.Xu · Joestar.Xu

您好：

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

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

如果是的话，这个是会造成一定程度上的性能影响，因为前端的性能有限，没有更好的方法可以提高性能，或者您也可以尝试降低页面中的数据量，一次性少渲染一些数据，也可以起到提升性能的效果。

换日线 · 换日线

本帖最后由换日线于 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的话，有没有什么比较好的方式实现呢

		自动登录	找回密码
密码			立即注册

[已处理] 初始化SpreadSheets绑定table渲染速度慢，导致页面卡顿。

最佳答案

3 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄