Higher-order components

Higher-order components (HOC) — это функция, которая принимает компонент React и возвращает новый компонент с расширенной функциональностью. В контексте MUI HOC часто используются для добавления стилей, темизации или интеграции с системами управления состоянием без изменения исходного компонента.

Основные принципы HOC

  1. Композиция через функции HOC реализуются как функции, которые оборачивают исходный компонент. Это позволяет добавлять дополнительные пропсы, обрабатывать события или интегрировать сторонние библиотеки, сохраняя чистоту оригинального компонента.

    const withExtraProp = (Component) => (props) => {
  return <Component {...props} extra="value" />;
};

  2. Повторное использование логики HOC идеально подходят для повторного использования общей логики между компонентами. Например, обёртка для управления состоянием видимости модальных окон или добавления обработчиков событий.

  3. Не изменяют оригинальный компонент HOC создаёт новый компонент, оставляя исходный нетронутым, что соответствует принципу иммутабельности в React.

HOC для стилизации в MUI

В MUI v4 и v5 стилизация через HOC чаще всего реализуется с помощью функций withStyles и withTheme.

withStyles

withStyles позволяет определить CSS-in-JS стили и применить их к компоненту:

import { withStyles, Button } from '@mui/material';

const styles = {
  root: {
    backgroundColor: 'blue',
    color: 'white',
    '&:hover': {
      backgroundColor: 'darkblue',
    },
  },
};

const StyledButton = withStyles(styles)(Button);

export default function App() {
  return <StyledButton>Нажми меня</StyledButton>;
}

Ключевые моменты:

  • styles — объект с ключами, соответствующими частям компонента (root, label, icon и т.д.).
  • HOC добавляет проп classes в исходный компонент.
  • Позволяет переопределять темы и использовать динамические значения через функцию theme => ({}).

withTheme

withTheme оборачивает компонент и передает ему текущую тему из контекста ThemeProvider:

import { withTheme } from '@mui/styles';

function ThemedComponent({ theme }) {
  return <div style={{ backgroundColor: theme.palette.primary.main }}>Тема работает</div>;
}

export default withTheme(ThemedComponent);

Применение HOC с темой:

  • Позволяет получать доступ к объекту темы без использования хука useTheme.
  • Удобно для классовых компонентов, где хуки использовать нельзя.

Создание пользовательских HOC

HOC можно создавать для любых задач, например, для логирования пропсов, проверки прав доступа или управления состоянием:

const withLogger = (Component) => {
  return (props) => {
    console.log('Пропсы компонента:', props);
    return <Component {...props} />;
  };
};

const LoggedButton = withLogger(Button);

export default function App() {
  return <LoggedButton variant="contained">Логирование</LoggedButton>;
}

Особенности пользовательских HOC:

  • Можно оборачивать несколько HOC друг в друга для создания цепочки расширений.
  • Рекомендуется сохранять читаемость через именование: withSomething(Component).

Советы по использованию HOC в MUI

  1. Использовать HOC для классовых компонентов В функциональных компонентах большинство задач решаются хуками (useTheme, useStyles), но для классовых компонентов HOC остаются актуальными.

  2. Комбинировать с системами темизации HOC позволяют внедрять тему в компоненты, не меняя их структуру и избегая дублирования кода.

  3. Избегать глубокого вложения HOC Слишком много обёрток затрудняют отладку и могут влиять на производительность. Предпочтительнее комбинировать стили через объект sx или хуки, когда это возможно.

Отличие HOC от рендер-пропов и хуков

  • HOC — создаёт новый компонент, расширяя функциональность.
  • Render props — передают функцию в дочерний компонент для управления рендерингом.
  • Хуки — используют функциональные компоненты и позволяют внедрять состояние или контекст без обёрток.

HOC в MUI остаются мощным инструментом для интеграции стилей и темы в классовые компоненты, но для новых проектов рекомендуется отдавать предпочтение хукам и sx пропсу, сочетая их с минимальным количеством HOC для чистоты архитектуры.

Практическое использование HOC в проектах MUI

  • Создание withAuth для защиты страниц, где компонент получает доступ к состоянию аутентификации.
  • withErrorBoundary для оборачивания компонентов в обработчик ошибок, совместимый с MUI Layout.
  • withResponsive для адаптивной стилизации через тему и breakpoints MUI.

HOC предоставляют мощный способ повторного использования логики и стилизации, сохраняя компонент чистым и легко расширяемым, что особенно важно при работе с большим набором компонентов MUI.

Оглавление