👑 [需求] 优化ProLayout 渲染时 child 组件的位置跳动问题

[asuiah]

🔩 所属模块或组件

ProLayout

🥰 需求描述

目前第一次访问页面都会出现子组件跳动，用户反馈影响体验。 希望用户首次加载进入页面就能够看到最终的ProLayout Style。

⛰ 功能需求适用场景

用户首次进入页面

🧐 解决方案

root cause 是因为 PageContainerBase 中的 useEffect 使用 setHasPageContainer 更新state, 导致 WrapperContent 组件更新 contentClassName 中的 ${prefixCls}-content-has-page-container class 导致css改变。

PageContainer 中 PageContainerBase 组件 useEffect 改用为 useLayoutEffect.

🚑 其他信息

子组件第一次渲染 首次渲染

useEffect 执行setHasPageContainer 再次渲染，添加 ${prefixCls}-content-has-page-container 后

[wenruiq]

+1

[lifuhuang97]

+1 experiencing layout shift issue as well

[anuoua]

+1