Переиспользование кода

MUI (Material-UI) предоставляет мощный набор компонентов и инструментов для построения интерфейсов, что делает переиспользование кода особенно эффективным. Центральная идея — создание универсальных компонентов, которые можно конфигурировать через props, комбинировать и расширять без дублирования логики.

Создание универсальных компонентов

Для повторного использования компонентов важно отделять структуру, стили и поведение. Например, кнопка с разными вариантами:

import Button from '@mui/material/Button';

function CustomButton({ variant = 'contained', color = 'primary', onClick, children }) {
  return (
    <Button variant={variant} color={color} onCl ick={onClick}>
      {children}
    </Button>
  );
}

variant и color — позволяют менять стиль без создания новых компонентов.
children обеспечивает гибкость контента.
onClick передает обработчик событий извне, не привязывая компонент к конкретной логике.

Такой компонент можно использовать в разных местах приложения, минимизируя повторение кода.

Комбинирование компонентов

MUI поддерживает композицию компонентов, что позволяет строить сложные UI из простых элементов. Пример:

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import CustomButton from './CustomButton';

function UserCard({ user, onEdit }) {
  return (
    <Card sx={{ maxWidth: 300, margin: 2 }}>
      <CardContent>
        <Typography variant="h6">{user.name}</Typography>
        <Typography variant="body2">{user.email}</Typography>
        <CustomButton color="secondary" onCl ick={() => onEdit(user.id)}>
          Редактировать
        </CustomButton>
      </CardContent>
    </Card>
  );
}

Компонент UserCard использует CustomButton, демонстрируя переиспользование логики кнопки в разных контекстах.

Использование `sx` и `styled` для повторного стайлинга

MUI предоставляет два подхода для кастомизации стилей:

sx-проп — быстрые локальные стили:

<Button sx={{ margin: 2, padding: 1, fontWeight: 'bold' }}>
  Пример
</Button>

styled API — создание переиспользуемых styled-компонентов:

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const StyledButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.success.main,
  color: '#fff',
  '&:hover': {
    backgroundColor: theme.palette.success.dark,
  },
}));

StyledButton можно использовать везде, где нужен одинаковый стиль кнопки, без копирования sx.

Создание тематических компонентов

Использование темы MUI позволяет централизованно управлять стилями и переиспользовать их в разных компонентах:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#9c27b0' },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CustomButton color="primary">Главная кнопка</CustomButton>
    </ThemeProvider>
  );
}

Преимущество темы — изменение цвета или шрифтов в одном месте автоматически обновляет все компоненты, использующие theme.palette.

Переиспользование через HOC и функции-обертки

Для повторной логики поведения можно использовать Higher-Order Components (HOC) или функции-обертки:

function withLoading(Component) {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) return <div>Загрузка...</div>;
    return <Component {...props} />;
  };
}

const UserCardWithLoading = withLoading(UserCard);

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

Использование кастомных хуков

Повторяющуюся логику можно вынести в кастомные React-хуки, особенно при работе с состоянием или API:

import { useState, useEffect } from 'react';
import axios from 'axios';

function useUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('/api/users').then(response => {
      setUsers(response.data);
      setLoading(false);
    });
  }, []);

  return { users, loading };
}

Затем можно комбинировать с компонентами MUI:

function UsersList() {
  const { users, loading } = useUsers();

  if (loading) return <div>Загрузка...</div>;

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} onE dit={() => {}} />
      ))}
    </div>
  );
}