Повседневная мякотка Frontend:
Словарь
Я выделяю 3 вида компонентов:
- Container (Контейнер) – компонент, в котором лежит логика приложения / бизнес-логика или коннекторы до логики.
- UI component (UI компоненты) – компонент отображения, например «кнопка».
- Grid component (Грид компоненты) – компонент сетки, определяющий где UI компонент будет находиться и какого размера будет, например, cправа в панели поиска и 300px.
По-факту это концепция Smart-Dumb components, но я еще добавил Grid components, для более удобного регулирования положения компонента.
Пример: цвет и анимацию кнопки определяет UI component (например, <ButtonUI/>), размер и положение в меню справа определяет Grid component (схематично, <div style={{...}}><ButtonUI onClick={...}/></div>), а вот что будет происходить при нажатии отвечает Контейнер, например поисковой строки (схематично, <SearchPanel><div style={{...}}><ButtonUI onClick={...}/></div></SearchPanel>)
За счет этого вы достигаете максимальной гибкости:
- Какого размера и где будет отражаться кнопка берет на себя Grid component
- Как себя будет вести кнопка при том или ином обстоятельстве берет на себя Container
- А вот за то, как она отображается отвечает UI component
Правила
- Роутинг
- На странице Роутинга лежат компоненты Грида и Контейнеры, чаще всего, уникальные для этой страницы роутинга
- Что куда
- В Контейнерах могут быть:
- Другие Контейнеры
- Компоненты Грида.
- В компонентах Грида могут быть: Контейнеры.
- В UI компоненте только другие UI компоненты.
- В Контейнерах могут быть:
- Конкретика
- Для Списка используем Контейнеры
- Элементы списка – UI компоненты.
- Deeeep
- Если надо прокинуть бизнес-логику из Контейнера или сам Контейнер очень глубоко, тогда используем Context
- С чего начинать
- Я пишу сначала очень толстые UI компоненты (много верстки, даже очень) в 1 файле и только, когда они готовы, я их декомпозирую
Я буду постоянно пополнять этот список, так что сохраняйте в закладочки.
