🧐[问题] 当右侧主体部分有ant table时，点击菜单收缩，会非常慢，似乎右侧被重复render很多次。

[fly4us]

🧐 问题描述

当右侧主体部分有ant table（其他复杂内容似乎没问题）时，点击菜单收缩，会非常慢，似乎右侧被重复render很多次。大家遇到过么？怎么解决呀？

[focus0802]

有这个情况，table渲染比较复杂时10s左右才能收缩菜单

[fly4us]

我把右侧固定宽度就不会出现这个问题了，原因应该是table那边，在菜单收缩过程中，多次不断的进行responsive造成呢，有没有办法避免呢？收缩完成后再进行responsive

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

可以通过监听菜单收缩事件，在菜单完全收缩之后再进行table的responsive，避免因为多次的渲染导致性能问题。

具体做法如下：

1. 为菜单添加折叠事件监听：

<Menu
  mode="inline"
  theme="dark"
  onCollapse={this.handleMenuCollapse} //添加菜单收缩事件监听
  collapsed={this.state.collapsed}
>
...
</Menu>

2. 在菜单收缩事件中，添加table的responsive：

handleMenuCollapse = (collapsed) => {
  this.setState({ collapsed });
  //等待菜单收缩完成后再进行responsive
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'));
  }, 300);
}

其中 setTimeout 的延时时间可以根据实际情况进行调整，根据测试300ms足够让菜单完全收缩。

3. 如果仍然存在性能问题，可以尝试使用 shouldComponentUpdate 方法进行优化，避免不必要的重复渲染。可以参考 React文档中的shouldComponentUpdate。

希望能够帮助到您。