Antd 使用Layout布局刷新会导致左侧栏闪动，怎么解决

Question

Antd 使用Layout布局刷新会导致左侧栏闪动，怎么解决
这是正常时的画面

这是闪动时的画面

这是代码

<Layout style={{ minHeight: '100vh' }} className={style.container}>
      <Sider style={{ background: '#545c65' }} collapsible collapsed={collapsed} trigger={null}>
        <p className='bigTitle'>{collapsed ? '后台' : '通用后台管理系统'}</p>
        <Menu
          theme="dark"
          defaultSelectedKeys={[location.pathname.slice(1)]}
          mode="inline"
          items={items}
          style={{ background: '#545c65' }}
          onClick={(item) => clickMenu(item)}
        />
      </Sider>
    </Layout>

只要定义了Menu标签的items这个属性，就会出现这样的问题

Answer 1

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
这个问题可能是由于在组件的重新渲染过程中，导致Sider组件重新挂载，从而导致左侧栏闪动。可以尝试以下两种方式解决：

1. 使用React.memo或PureComponent避免组件的不必要重渲染：

import React, { memo } from 'react';

const MySider = memo(({ items, handleClick }) => {
  return (
    <Layout style={{ minHeight: '100vh' }} className={style.container}>
      <Sider style={{ background: '#545c65' }} collapsible collapsed={collapsed} trigger={null}>
        <p className='bigTitle'>{collapsed ? '后台' : '通用后台管理系统'}</p>
        <Menu
          theme="dark"
          defaultSelectedKeys={[location.pathname.slice(1)]}
          mode="inline"
          items={items}
          style={{ background: '#545c65' }}
          onClick={(item) => handleClick(item)}
        />
      </Sider>
    </Layout>
  )
})

export default MySider;

在使用这个组件的父组件中，可以把items和handleClick封装为函数，在渲染的时候传递给MySider组件：

import React, { useCallback } from 'react';

function MyPage() {
  const items = [...];
  const handleClick = useCallback((item) => {...}, []);

  return (
    <div>
      <MySider items={items} handleClick={handleClick} />
      <div>...</div>
    </div>
  )
}

这样可以确保在父组件的状态或者函数不发生变化的情况下，MySider组件不会重新渲染。

1. 在Menu组件中传递一个key值来确保Menu组件的重新渲染：

import React from 'react';

function MySider({ items, handleClick }) {
  return (
    <Layout style={{ minHeight: '100vh' }} className={style.container}>
      <Sider style={{ background: '#545c65' }} collapsible collapsed={collapsed} trigger={null}>
        <p className='bigTitle'>{collapsed ? '后台' : '通用后台管理系统'}</p>
        <Menu
          key={items.length} // 添加一个key值
          theme="dark"
          defaultSelectedKeys={[location.pathname.slice(1)]}
          mode="inline"
          items={items}
          style={{ background: '#545c65' }}
          onClick={(item) => handleClick(item)}
        />
      </Sider>
    </Layout>
  )
}

export default MySider;

这样，每当items数组发生变化时，就会重新渲染整个MySider组件，但其他组件不会受到影响。
如果我的回答解决了您的问题，请采纳！