🧐[问题 | question] app.tsx 中设置动态layout的pure属性，如何保证content不重新渲染

[xiaoziv]

🧐 问题描述 | Problem description

通过自定义的fullscreen按钮，希望设置layout的pure模式，但是发现content中的内容会重新渲染，如何设置保证content内容不重新渲染

💻 示例代码 | Sample code

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  const [pure, setPure] = useState<boolean>(false);
  const fullScreen = () => {
    setPure(!pure);
  };

  return {
    pure,
    headerContentRender: () => [
      <Button
        key="fullScreen"
        type="link"
        onClick={fullScreen}
        icon={<FullscreenOutlined />}
      ></Button>
    ],
    childrenRender: (children) => {
      return (
        <ConfigProvider componentSize="middle">
          {children}
          {isDev && (
            <SettingDrawer
              disableUrlParams
              enableDarkTheme
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </ConfigProvider>
      );
    },
    ...
}

🚑 其他信息 | Other information

OS: MacOs 14.2.1 (23C71)

Node：v22.7.0

浏览器 | browser：Microsoft Edge Version 128.0.2739.54 (Official build) (arm64)