Antd 中Table 渲染 ResizeObserver 问题分析和解决方案

技术 · 2023-10-26
Antd 中Table 渲染 ResizeObserver  问题分析和解决方案

2023-10-26T10:11:05.png

问题

ResizeObserver loop completed with undelivered notifications
常常出现在react中 Ant-design 或 vue中使用element-ui 的Table(DataGrid)组件中,主要表现是浏览器渲染页面时,Table表格的表头表体的每个单元格宽度循环计算导致页面多次渲染。

原因

报错的原因:在页面绘制的时候,页面内组件或DOM循环调整大小的事件,导致了样式和布局都需要重新评估,这个调整大小导致的布局变化,将延迟到下一帧来绘制,如此循环导致浏览器告警。

出现版本: antd 版本大于等于 4.0 的时候 会出现,小于antd 4.0 不会出现,【官方说展开行不能和固定列一起使用】
关于 ant design 4.0 的问题可以参考知乎专栏

影响

该错误对业务代码不会产生错误或中断,业务代码能正常执行。控制台不会报错。主要影响时开发阶段全屏提示,说明代码中的循环渲染影响了浏览器的性能。

解决方案

方法1

去掉滚动属性中 x 的横向滚动:scroll={{x: 'max-content'}} ,让宽度自适应。

方法2

对dataSource 中的值设置未 [{}] ,这个时有副作用的。会导致列表中有一条的空数据。
columns={[]} dataSource={[{}]}

方法3

升级andt 的版本到最新,官方已经解决该问题了。

本文作者:首乌

本文链接:https://www.wesee.club/archives/859/

版权声明:自由转载-非商用-非衍生-保持署名(cc 创意共享 3.0 许可证

antd
Theme Jasmine by Kent Liao

粤ICP备2023052298号-1