Список автономных функций, которые делают угловые каркасы, отличаются от других рамок.
Фотография Engin Akyurt на Неспособный
В этой статье «Что вы потеряете, если вы решите отреагировать над угловым» Я увижу некоторые из функций, которые делают угловые уникальными и выделяющимися из других рамок, и эта статья не предназначена для сравнения реагирования с угловым Вы что -то потеряете, поэтому я написал эту статью, чтобы направить, что вы бросите функции, которые вы потеряете, если вы решите реагировать на Angular И, наконец, вы можете выбрать все, что хотите, но помните, что вы что -то потеряете 😉.
Прежде чем мы начнем, я знаю, что многие из этих функций могут добавить в реагирование с использованием библиотек сообщества, но этот подход пришел со многими проблемами, такими как
- Библиотека не обновлена, чтобы соответствовать последней версии React.
- Автор библиотеки решает удалить его.
- Может быть, отреагируйте обновление самого, сделав библиотеку устаревшей.
Di (инъекция зависимости)
Без сомнения Инъекция зависимости является одной из отдельных функций отличительной угловой от других рамок или библиотеки, поэтому я делаю это в верхней части списка.
Так что же Инъекция зависимости ?
В разработке программного обеспечения инъекция зависимостей – это метод, в котором объект получает другие объекты, от которых он зависит. Эти другие объекты называются зависимостями. В типичных «использования» отношениям принимающего объект называется клиентом, а переданный объект называется службой.
Что Инъекция зависимости предложение?
- Singleton Class (ограничивает экземпляр класса одним «синглом» экземпляром).
- Легко в единичном испытании (вы передадите необходимые объекты конструктору).
- Состояние обмена между компонентами.
- Совместное использование функциональности через приложение.
Что реагирует, похожее на Инъекция зависимости в угловании?
Для обмена государством React имеет контекст , Который обеспечивает способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне. Это не решает проблему масштаба после того, как все контексты являются глобальными государствами и ограничены только государствами совместного использования.
Для функциональности совместного использования вы можете использовать класс, но если вы хотите, чтобы он был в одноместном классе или загрузите его, когда он вам нужен, как Angular, вы собираетесь построить его с собой, поскольку команда React не дает такого решения для этой проблемы.
Разделение проблем
У Angular нет ограничений на написание вашего углового компонента в одном файле или с несколькими изделиями, один для HTML One для CSS и один для JavaScript, с другой стороны, реагируйте за то, что вы заставляете вас написать свой HTML с помощью синтаксиса JSX внутри функции рендеринга, которая в порядке Если компонент очень маленький и не имеет большой логики, прикрепленной к нему, но он станет боли впереди, как только этот компонентный масштаб оставит вас с проблемой читаемости.
Обсеянный CSS
Angular предоставляет встроенные решения для CSS с объемом CSS, которая является очень важной и важной функцией, если вы хотите создать многоразовый стиль компонент, с другой Ваши собственные решения или придерживайтесь различных вариантов, чтобы забрать один из них.
Стандер HTML 😢
Сюрприз, JSX не HTML, и вы не можете использовать некоторые атрибуты в HTML, например, напрямую учебный класс стать классное имя , для стать htmlfor Я знаю, что это не имеет большого значения Но это имеет значение, и это приводит нас к другому разделу.
Веб -компоненты не полностью поддерживаются в React
Я не собираюсь объяснять, что такое Веб -компоненты или почему это становится веб -стойкой, вы можете проверить это Ссылка Больше подробностей.
Согласно React Документация : «Реакция и веб -компоненты созданы для решения различных проблем. Веб -компоненты обеспечивают сильную инкапсуляцию для многократных компонентов, в то время как React предоставляет декларативную библиотеку, которая поддерживает DOM в синхронизации с вашими данными. Две цели дополняют. Как разработчик, вы можете использовать React в своих веб -компонентах или использовать веб -компоненты в React, или и то, и другое ».
Это мило, но это не совсем честно, например, в соответствии с тем же документом, если вы собираетесь использовать видеотете, например, и хотите прослушать, чтобы воспроизвести или приостановить событие из DOM, вам нужно будет использовать рефери для взаимодействия с Узел DOM напрямую, это похоже на старые времена jQuery.
React Team порекомендовала деформировать веб -компонент с помощью компонента React, просто чтобы он работал еще один обходной путь для ограничения.
Директивы
Один из забавных фактов о директивах, которые он существует практически в любых рамках, кроме реагирования. В основном фреймворки с использованием двух подходов либо используют свой собственный шаблонный двигатель, такой как лезвие в Laravel или использовании обычных HTML в качестве шаблонных двигателей, таких как Riotjs, Vuejs и Angular.
Итак, что такое Директивы ?
Определение может отличаться от одной структуры к другой, но в целом оно отгружает элемент, прикрепленный к нему, добавляя дополнительные функциональные, которые не существует, когда элемент создан или прикреплен к DOM.
Какой угловой Директивы предоставлять?
- Более читаемое ознакомившееся с универсальным встроенным тройным оператором просто напишите директиву на элементе.
- Многоразовый кусок кода.
- Директивы могут быть директивой атрибутов или структурными директивами.
- Директива атрибута меняет внешний вид или поведение элемента DOM.
- Структурные директивы несут ответственность за макет HTML.
Формы, формы и формы 😁
В настоящее время нет веб -приложений или веб -сайтов, у которых нет формы или, по крайней мере, строки поиска, и я думаю, что Реактивная форма Это одна из блестящих особенностей, которые существуют только в угловом решении многих проблем, связанных с формами элегантным и расширяемым способом, эта удивительная особенность делает сборку сложной формы супер легкой, простой в обслуживании и простых в настройке. С другой стороны, команда React не предоставляет никаких решений для простой проблемы с обычной формой и принимает ее для решения разработчика, и это приводит к озеру решений, и многие из них очень самоуверенные, и многие из них решают часть проблема.
Пример: угловая реактивная форма (форма входа в систему)
const form = new FormGroup({
email: new FormControl('', [
Validators.required,
Validators.email
]),
password: new FormControl('', [
Validators.required,
noWhitespaceValidator // custom validator
]),
});
onSubmit() {
if (this.form.valid) {
const formValue = form.value; // get the form data
// call the server or do what you want
// ...
}
}
Как видите, это очень легко поддерживать, читать и более разумно, я не собираюсь объяснять реактивную форму подробно, но вот список того, что выделяет его функции.
- Реактивные формы обеспечивают модельный подход к обработке входов форм, значения которых изменяются с течением времени.
- Реактивные входы наблюдаются.
- Пользовательские валидаторы.
- Async Valdators (например: проверка на стороне сервера, если доступно имя пользователя или нет).
- Complex Validator (например: проверка, если ввод пароля, соответствующий вводу арендатора, сопоставление пароля).
Угловой клин
Angular CLI – это не генератор Schofield или сценарии, работающие только за его пределами, и вот некоторые из функций.
- Сгенерируйте файлы компонентов непосредственно из CLI с предварительно заполняющими данные, как вы настраивали в CMD.
- Обновите свой угловой проект с помощью одной команды.
- Создайте свой собственный генерирует, используя Угловая схема Анкет
- Поддержите SASS, меньше и стилус из коробки. Не нужно дополнительной настройки или редактирования или извлечения конфигураций веб -упаковки.
Многие люди больше заинтересованы в том, что они потеряют, а не то, что они заработают, чтобы не пожалеть об этом решении. Это похоже на компромисс, который вы выиграете и проиграете, нет никаких идеальных решений для всех проблем в жизни или в программировании, но после перечисления тех функций вы можете увидеть угловую структуру, используя обычные HTML, поэтому большинство решений и функций существуют фокус На повторном использовании, а не для того, чтобы сломать веб -стендовые, с другой стороны, реагируйте на то, чтобы сохранить данные синхронизации с помощью пользовательского интерфейса.
Композиция угловой композиции Полное руководство
Ислам Мухаммед ・ 11 марта ’19 ・ 4 мин прочитал
Каждое советы по производительности для Angular App (часть выполнения)
Ислам Мухаммед ・ 3 апреля 2020 года читать
Оригинал: “https://dev.to/imm9o/what-you-gona-lose-if-you-chose-react-over-angular-25ln”