search

alibaba-fusion / next

🦍 A configurable component library for web built on React.
https://fusion.design
MIT License
4.59k stars 590 forks source link

[Dialog]Bug Dialog V2 子组件重复渲染设计缺陷 #3660

Open Z8264 opened 2 years ago

Z8264 commented 2 years ago

Component

Dialog

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Dialog V2 版本中，visible = true 时，子组件会被重复渲染3次。 该行为造成很多困扰，性能，调试，和隐含的逻辑问题。 该组件设计存在实现缺陷。

Z8264 commented 2 years ago

@bindoon 这个有修复计划吗，在复杂弹窗交互的场景中，业务会造成性能问题，以及开发调试的问题。

bindoon commented 2 years ago

@Z8264 已经定位到问题了，是 Animation 动效的 entering entered 两次动效造成了 额外两次渲染。 用的是 react-trastion-group 库，暂时还没找到避免多次渲染的方法。

https://github.com/alibaba-fusion/next/blob/master/src/animate/overlay-animate.jsx#L64

Z8264 commented 2 years ago

@bindoon 希望能尽快修复该问题，尤其配合 formily 的弹出框的复杂表单，造成很多困扰。

YSMJ1994 commented 8 months ago

@bindoon 希望能尽快修复该问题，尤其配合 formily 的弹出框的复杂表单，造成很多困扰。

更有效的方案是在对 rerender 敏感的业务组件侧使用类似 React.memo 来阻止无效的 rerender 以避免这个问题