• суг команда
• Автор: Томей

1. Открытие

Говоря о front-end компонентизации, это частая тема последних лет, автор не будет давать подробного введения в историю развития, преимущества и недостатки front-end компонентизации. Сегодня я хотел бы поделиться с вами тем, что автор развивается от небольших проектов на ранней стадии к функциональным итерациям на более поздней стадии.Функциональных модулей становится все больше и проектов становится все больше и больше.Разработка спецификаций компонентов не идеальна.Некоторые проблемы и собственные размышления автора о программе.

2. Найдите и поднимите проблемы

1. Три диаграммы иллюстрируют функциональную диаграмму итерации бизнес-модуля.

Первое издание

Односторонний поток данных компонентов, односторонняя передача состояния родительского компонента дочерним компонентам

Версия 2

По мере итерации функции компоненты, не являющиеся родительскими и дочерними, совместно используют некоторое состояние. Здесь, поскольку совместное использование состояния между неродительскими и дочерними компонентами несложно, продвижение состояния предпочтительнее (продвижение состояния, нам нужно продвигать состояние, совместно используемое между дочерними компонентами, в компонент-контейнер для управления, а компонент-контейнер отправляется в компонент-контейнер). дочерний компонент) для решения такого рода проблем. вопрос.

3-е издание

Благодаря более функциональным итерациям, все большему количеству уровней модулей и более сложному совместному использованию состояний между несколькими уровнями компонентов.

Редукция управления состоянием и vuex, по-видимому, решают такие проблемы.

Благодаря открытию вышеуказанного цикла итерации модуля проекта совместное использование состояния нескольких компонентов становится неизбежным. Обычно существует три способа обработки общего состояния:

1. Чтобы обновить состояние, нам нужно обновить общее состояние между подкомпонентами до компонента-контейнера для управления, а компонент-контейнер доставить его в подкомпонент.
2. Редукция управления состоянием, vuex.
3. Механизм событий, подкомпоненты изменяют общее состояние и распределяют их через испускаемый модуль управления событиями, а подкомпоненты, которые должны синхронно изменять состояние, получают события изменения через on.

Действительно ли введение государственного управления решает все проблемы?

1. Какое состояние компонента необходимо извлечь в управление состоянием?
2. Как избежать неправильного использования глобального состояния для загромождения проекта?
3. Как делятся компоненты-контейнеры и компоненты представления?
4. Спецификации и стили компонентов совместной разработки с участием нескольких человек неоднородны, правила двусторонней модификации общего состояния между компонентами неоднородны, а стоимость обучения новичков высока.

3. Решить проблему

Автор считает, что путь решения проблемы заключается в формулировании соответствующих спецификаций, обеспечивающих единый стиль командного кода.

1. Спецификация разработки компонента контейнера и компонента представления.
2. Какие состояния компонентов должны быть извлечены в управление состоянием, спецификации развития управления состоянием.

Пожалуйста, посмотрите на изображение ниже:

Компоненты контейнерного типа: в основном для получения, обновления, отправки и удаления данных состояния компонентов дисплея.Это не включает в себя какие-либо модификации или комбинации Virtual DOM, а также стиль компонента.

Предметующие компоненты: презентационные компоненты в основном показывают, как компоненты отображаются, включая модификацию или комбинацию виртуального DOM, а также стилей компонентов и не зависят от какой-либо формы магазина. Как правило, его можно записать как функцию бездействия, но на самом деле, поскольку существуют методы натюрмочного цикла во многих компонентах отображения, они не обязательно являются компонентами без гражданства.

проиллюстрировать:

1. В начальной версии проекта имеется только один компонент-контейнер A. Контейнер A содержит три компонента отображения A1, A2 и A3. Всеми общими состояниями управляет контейнер A.
2. По мере итерации проекта компонент контейнера A будет разделен на два новых компонента контейнера модуля B и C.
3. Компоненты контейнера B и C соответственно включают компоненты отображения B1, B2, C1 и C2, и между B и C существует общее состояние.
4. Данные состояния совместно используются компонентами контейнера и управляются хранилищем управления состоянием.

Технические характеристики:

1. Компонент представления должен использоваться в компоненте-контейнере.За исключением уникального состояния, другие общие состояния единообразно управляются компонентом-контейнером.
2. Компонент дисплея включает операции, которые изменяют общее состояние, например события щелчка.Событие щелчка необходимо передать компоненту-контейнеру с помощью функции обратного вызова без сохранения состояния, а компонент-контейнер выполняет получение состояния, обновление, отправку, удаление и другие операции. унифицированным образом.
3. Компоненты родительского и дочернего контейнера совместно используют состояние, а дочерний контейнер может только читать общее состояние компонента родительского контейнера и не может быть изменен (например, дочерний контейнер может быть передан в родительский контейнер только через функцию обратного вызова без сохранения состояния). для обеспечения одностороннего потока данных.
4. Единственный способ для дочернего контейнера изменить родительский контейнер или изменить общее состояние неродительских и дочерних контейнеров — это единообразно изменить его через хранилище управления состоянием.
5. Поскольку общее состояние между контейнерами не может быть изменено в обоих направлениях, в хранилище управления состоянием будет храниться большой объем данных общего состояния.Необходимо зарегистрировать состояние компонента контейнера, которое требует совместного использования состояния через системные модули и имена компонентов контейнера.

пример

Я написал базовый пример vue+vuex для справки. скачатьgithub

4. Конец

Это конец статьи. Основная цель написания этой статьи - записать мои мысли о спецификации компонентов. Я приветствую вас, чтобы высказать свое собственное мнение. Пожалуйста, поправьте меня вовремя, если статья неверна ~