Жуём SOLID дальше: Open/Close в React

Привет! 👋   Сегодня о принципе O — Open/Close: компонент должен быть открыт для расширения, но закрыт для модификации.  Звучит абстрактно?   Давайте на живом примере! Представьте компонент поиска с выпадающими результатами. Дизайнер приносит макет: "В выпадашке нужно показывать рекламные баннеры. Баннеры одного размера, но ведут себя по-разному!"  Просто добавим новый тип рекламы, залезем ВНУТРЬ компонента и добавим один if.  Что не так?   Каждый новый тип рекламы заставляет нас лезть в ядро компонента и добавлять очередной if или switch. Это прямое нарушение Open/Close.  Решение:   Пусть SearchDropdown просто отображает то, что ему передали: Что получили:  ● Стабильность: ядро компонента не трогаем;  ● Гибкость: новые типы рекламы — просто новые компоненты снаружи;  ● Масштабируемость: блоки можно комбинировать и управлять их показом без правки SearchDropdown.  Вывод:   Open/Close в React — про композицию. Делегируйте специфическую логику наружу, а не «раздувайте» компонент условными операторами.  Ибовляйтесь в ваших проектах от подобных "разрастающихся if"?   #solid #javascript #react #js #frontend

Жуём SOLID дальше: Open/Close в React | Сетка — социальная сеть от hh.ru