Question

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

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

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会按照预期使用正确的包装重新渲染。但是子级组件将完全重新渲染，从而失去了它们自己的状态。

有什么办法可以记住孩子，以便在包装器组件发生更改时保持孩子不变？

Answer 1

您可以将子组件包装在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

只有当道具改变时，您的组件才会重新渲染...

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

1 个答案: