Javascript 避免在父容器更改时重新呈现子容器

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

我创建了一个包装器组件，根据屏幕大小，用其中的任意一个组件包装其子组件：

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>
}

const包装器：React.FunctionComponent=（{children，…props}）=>{
让包装器组件：React.FunctionComponent
const modalType=useModalType（）
如果（modalType==“抽屉”）{
WrapperComponent=MobileDrawer
}否则{
WrapperComponent=ModalContainer
}
返回{children}
}

当我更改窗口大小时，

useModalType

会更改，并且

Wrapper

会按照预期使用正确的包装重新呈现。但是子组件被完全重新渲染，失去了它们自己的状态

---

有没有办法记忆子组件，以便在包装器组件更改时保持它们不变？

您可以将子组件包装在

React.memo中

e、 g

您可以在此处找到更多信息：

只有当道具更改时，组件才会重新渲染…
您可以将子组件包装在
React.memo中

e、 g

您可以在此处找到更多信息：

您的组件只有在其道具发生更改时才会重新渲染…
您是否查看了
shouldComponentUpdate（）
？您可以在子组件中使用它来防止它们重新呈现。我不希望在这里使用基于类的组件，因此解决方案可能涉及一个
usemo
hook，但是我不知道如何…我想这就是你要找的。我能看看
useModalType
的代码吗？你能分享这些道具吗？你有没有看过
shouldComponentUpdate（）
？您可以在子组件中使用它来防止它们重新呈现。我不希望在这里使用基于类的组件，因此解决方案可能涉及一个
usemo
hook，但我不知道如何…我猜这就是你要找的。我能看看
useModalType
的代码吗？你能分享道具吗？据我所知，当我的包装器组件发生变化时，React会在虚拟DOM中丢弃我的子组件，并在新的包装器组件下创建一个新的组件，因此，回忆录并不是这样work@Renaud但我认为这正是发生的，因为组件改变了整个树的卸载。唯一的解决方案是我在评论中建议的，一个提升状态（
SomeProvider
或Redux）。非常有趣的案例谢谢。据我所知，当我的包装器组件发生变化时，React会在虚拟DOM中丢弃我的子组件，并在新包装器组件下创建一个新组件，因此，回忆录并不是这样work@Renaud但我认为这正是发生的，因为组件改变了整个树的卸载。唯一的解决方案是我在评论中建议的，一个提升状态（
SomeProvider
或Redux）。非常有趣的案例，谢谢。
const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});