alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.58k stars 2.53k forks source link

arraySetter数据量较多时,点击组件很卡 #980

Closed yz1311 closed 2 years ago

yz1311 commented 2 years ago

详细描述 bug(必填)

数据量稍微较多,就5条,点击组件,右侧的面板要5s才能显示出现,发现是下面创建组件的方法非常耗时,并且array-setter组件没有专门进行优化处理

https://github.com/alibaba/lowcode-engine/blob/0b6dbf35d8d82029473e37c4338da74de3b919d6/packages/editor-skeleton/src/components/settings/settings-pane.tsx#L277

如何复现 bug?(必填,非常重要)

预期行为(必填,非常重要)

不卡顿

bug 截图(可选)

Environments (please complete the following information) (required): / 请提供如下信息(必填)

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息(可选)

Any other context of the problem here. / 可以追加更多的额外信息,帮助定位问题

yz1311 commented 2 years ago

另外新增、删除item的时候,也很卡(几乎有几项就几秒的卡顿),不过原因貌似和初始化的不一样

https://github.com/alibaba/lowcode-engine/blob/a78f31ae20501b299cee9650458a44176c9db3ad/packages/designer/src/designer/setting/setting-prop-entry.ts#L193

yz1311 commented 2 years ago

这边改变了数据格式,原本arraysetter设置的数据有一个字段是一个数组,数组很大,虽然没有在list中展示,但是点击组件或者更新列表值的时候,会非常卡顿,现在将这个字段的值变为字符串,然后在setter中进行解析,不会变卡顿了