Выбор ответа Junior SOLID и принципы обновлено
Нарушение SRP в компоненте
Вопрос
Что в этом компоненте сильнее всего нарушает SRP?
function Cart() {
const [items, setItems] = useState<Item[]>([]);
useEffect(() => {
fetch('/api/cart').then(r => r.json()).then(setItems);
}, []);
const total = items.reduce(
(s, i) => s + i.price * i.qty * (i.promo ? 0.9 : 1), 0);
return <ul>{/* ... */}<b>{total}</b></ul>;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Смешаны загрузка данных, правило скидки и разметка. Компонент поменяется и при смене API, и при смене правил скидок, и при смене вёрстки: три причины изменения.
Варианты ответа
- Использование
useEffectдля загрузки данных в компоненте - Отсутствие мемоизации
total, который считается на каждый рендер - Смешаны загрузка данных, правило скидки и разметкаправильный ответ
- Имя компонента не начинается с префикса
SmartилиContainer
Разбор
Компонент поменяется и при смене API, и при смене правил скидок, и при смене вёрстки: три причины изменения. Решение: вынести загрузку в хук или TanStack Query, скидку в чистую функцию calcTotal, оставить компоненту только отображение. Сам useEffect не нарушение, вопрос в том, что он смешан с остальным. Мемоизация это про производительность, а не про ответственность. Префиксы имён к SRP не относятся.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.