Декомпозиция панели уведомлений

В этом решении мы разбиваем панель уведомлений на множество мелких компонентов, создавая глубокую иерархию.

Компонент шапки

function NotificationsHeader({ unreadCount, onMarkAllAsRead }) {
    return (
        <div className="notifications-header">
            <h3>Уведомления {unreadCount > 0 && `(${unreadCount})`}</h3>
            <button
                onClick={onMarkAllAsRead}
                disabled={unreadCount === 0}
            >
                Пометить все как прочитанные
            </button>
        </div>
    );
}

NotificationsHeader объединяет заголовок со счётчиком и кнопку массового действия. Мы выделили шапку отдельно, потому что это независимый блок интерфейса с собственной логикой - показывать счётчик только если есть непрочитанные, блокировать кнопку если ничего не нужно помечать. Условие unreadCount > 0 && ... показывает скобки со счётчиком только когда есть что показывать.

Компонент иконки

function NotificationIcon({ type }) {
    const getIcon = () => {
        switch

NotificationIcon инкапсулирует логику выбора иконки по типу. Мы вынесли иконку в компонент, потому что соответствие типа и эмодзи - это отдельная ответственность. Функция getIcon находится внутри компонента, потому что она нужна только здесь. switch проверяет тип и возвращает соответствующий эмодзи.

Компонент контента

function NotificationContent({ title, text, time }) {
    return (
        <div className="

NotificationContent отвечает за отображение текстовой части уведомления. Мы выделили контент отдельно, чтобы отделить структуру (заголовок, текст, время) от других частей уведомления (иконка, кнопка закрытия). Это простой презентационный компонент, который только показывает переданные данные.

Компонент кнопки закрытия

function CloseButton({ onClose }) {
    return (
        <button
            className="close-btn"

CloseButton - это маленький компонент для кнопки удаления. Мы вынесли её отдельно, потому что она содержит важную логику - e.stopPropagation(). Без этого вызова клик по кнопке всплыл бы к родительскому элементу (уведомлению) и вызвал бы его обработчик. stopPropagation останавливает распространение события, делая кнопку независимой.

Компонент уведомления

function NotificationItem({ notification, onMarkAsRead, onRemove }) {
    return (
        <div

NotificationItem собирает вместе иконку, контент и кнопку закрытия. Мы создали этот компонент, чтобы инкапсулировать логику одного уведомления - условный класс для прочитанных/непрочитанных, клик для пометки как прочитанного. Условие !notification.read && onMarkAsRead(notification.id) вызывает функцию только для непрочитанных - прочитанные не реагируют на клик.

Условный обработчик клика

onClick={() => !notification.read && onMarkAsRead(notification.id)}

Оператор && работает как короткая форма условного выполнения. Если !notification.read истинно (уведомление непрочитанное), выполняется правая часть - вызов функции. Если ложно (уведомление прочитано), ничего не происходит. Это компактнее, чем if (!notification.read) { onMarkAsRead(notification.id) }.

Компонент списка

function NotificationsList({ notifications, onMarkAsRead, onRemove }) {
    return (
        <div 

NotificationsList - это контейнер для списка уведомлений. Мы выделили список отдельно, чтобы отделить логику отображения множества элементов от логики одного элемента. Компонент получает функции onMarkAsRead и onRemove и пробрасывает их в каждый NotificationItem.

Функция пометки всех как прочитанных

const markAllAsRead = () => {
    setNotifications(
        notifications.map((notification) => ({

Функция создаёт новый массив, где у каждого уведомления флаг read установлен в true. Мы используем map для создания нового массива объектов. Spread оператор ...notification копирует все поля уведомления, а затем мы перезаписываем только read: true. Это не мутирует оригинальные объекты, соответствуя правилам React.

Функция пометки одного как прочитанного

const markAsRead = (id) => {
    setNotifications(
        notifications.map((notification) =>
            notification

Функция изменяет только одно уведомление с нужным id. Для уведомления с совпадающим id создаём новый объект с read: true, для остальных возвращаем оригинальные объекты без изменений. Тернарный оператор проверяет каждое уведомление и решает, модифицировать его или оставить.

Функция удаления

const removeNotification = (id) => {
    setNotifications(notifications.filter((notification) => notification.id 

Метод filter создаёт новый массив, содержащий только элементы, для которых функция вернула true. Условие notification.id !== id означает "все уведомления, кроме удаляемого". Уведомление с нужным id не попадёт в новый массив - оно удалено из списка.

Вычисление счётчика непрочитанных

const unreadCount = notifications.filter((n) => !n.read).length;

Мы вычисляем количество непрочитанных уведомлений при каждом рендере. filter((n) => !n.read) отбирает только непрочитанные, length даёт их количество. Это не состояние, а вычисляемое значение - оно автоматически обновляется при изменении массива notifications. Не нужно синхронизировать отдельное состояние для счётчика.

Композиция в главном компоненте

return (
    <div className="notifications">
        <NotificationsHeader
            unreadCount={

Компонент App собирает шапку и список вместе. Структура максимально простая - два больших блока. Всё состояние и бизнес-логика (функции изменения массива) находятся в App, а компоненты только отображают интерфейс и вызывают переданные функции. Шапка управляет массовыми действиями, список отображает элементы и обрабатывает действия над отдельными уведомлениями.