如果父容器发生更改,请避免重新渲染子级

问题描述 投票:0回答:1

我正在设计一种模态系统,其中模态可以显示在抽屉上(用于小屏幕)或模态窗口。

我创建了一个包装器组件,该组件将其子组件用这些组件之一包装,具体取决于屏幕尺寸:

const Wrapper: React.FunctionComponent<any> = ({ children, ...props }) => {
  let WrapperComponent: React.FunctionComponent

  const modalType = useModalType()

  if (modalType === "drawer") {
    WrapperComponent = MobileDrawer
  } else {
    WrapperComponent = ModalContainer
  }

  return <WrapperComponent {...props}>{children}</WrapperComponent>
}

当我更改窗口大小时,useModalType会发生更改,并且Wrapper会按照预期使用正确的包装重新渲染。但是子级组件将完全重新渲染,从而失去了它们自己的状态。

可以通过任何方式来记住子代,以便在包装器组件发生更改时使子代保持不变吗?

javascript reactjs react-hooks
1个回答
0
投票

您可以将子组件包装在React.memo

例如

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

您将在这里找到更多信息:https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactmemo

您的组件只有在道具更改时才会重新渲染...

© www.soinside.com 2019 - 2024. All rights reserved.