如果父容器发生更改，请避免重新呈现子容器

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

有没有任何方法可以记住子级，以便在包装器组件更改时保持不变？

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

只有当道具发生变化时，你的组件才会重新渲染。。。