search

drawdb-io / drawdb

Free, simple, and intuitive online database design tool and SQL generator.
https://drawdb.vercel.app
MIT License
12.08k stars 851 forks source link

repeated rendering of the Collapse child component #101

Closed l123wx closed 1 month ago

l123wx commented 1 month ago

Currently, when toggling the display state of Collapse, the child components are being destroyed, and each time the collapse is displayed, the child components are re-rendered. This results in unnecessary performance overhead, especially when there are many fields.

Before

https://github.com/drawdb-io/drawdb/assets/48666585/f02c4827-943d-4529-8177-c7653994526d

We can optimize this by using the keepDOM and lazyRender properties of Collapse:

image

After

https://github.com/drawdb-io/drawdb/assets/48666585/9b58bc67-2cb3-401d-870d-89dbd4b1bad6

The child elements of Collapse will be rendered only when the Collapse is first opened, and they won't be destroyed when the Collapse is closed, thus avoiding re-rendering when it's opened again.

l123wx commented 1 month ago

Tabs also face a similar issue. I've switched to using TabPane to ensure that the lazyRender and keepDOM attributes work.