Избегайте повторного рендеринга дочерних элементов при изменении родительского контейнера.

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

Ваш компонент будет перерисован только в случае смены реквизита ...