Несмотря на то, что между использованием React и Angular есть некоторое сходство, очень мало общего между тем, как работают эти два фреймворка, и тем, что происходит под капотом.
На самом базовом уровне React и Angular являются интерфейсными фреймворками, которые расширяют стандартную библиотеку JavaScript. Из-за этого React и Angular часто называют сравнением яблок. Тем не менее, это не так! Хотя их конечные продукты могут иметь некоторое сходство с точки зрения UX, React и Angular невероятно разные.
Рассмотрим некоторые основные отличия:
УГЛОВОЙ:
- Разработано Google
- Имеет полные возможности MVC
- Рендеринг на стороне клиента
- Двусторонняя привязка данных
- JavaScript + HTML
РЕАКТИРОВАТЬ:
- Разработано Facebook
- JavaScript-библиотека
- Рендеринг на стороне сервера (Virtual DOM)
- Односторонняя привязка данных
- JavaScript + JSX
Это самые фундаментальные различия между ними! Давайте потратим некоторое время, чтобы распаковать эту информацию, чтобы немного лучше понять, что это на самом деле означает.
Проводя исследование для этого сообщения в блоге, я увидел другого блогера, у которого была отличная аналогия для сравнения React с Angular. Он лаконично описал сравнение Angular и React со сравнением автомобиля (Angular) с двигателем (React).
Хотя это ни в коем случае не является оценочным суждением, Angular дает разработчикам возможность работать со всеми возможностями MVC (модель, представление, контроллер), в то время как React работает в основном с V.
Еще одно важное различие между React и Angular заключается в том, как манипулируют DOM. Angular имеет двустороннюю привязку данных, что означает, что любые изменения в модели будут отображаться в представлении, а любые изменения в контроллере будут отображаться в представлении.
Например, если пользователь вводит текст в поле «ввод» в представлении, его текст не только появится на экране (изменение представления), но и это изменение будет отражено в модели. Это позволяет Angular напрямую манипулировать DOM и значительно упрощает работу.
С другой стороны, React имеет только одностороннюю привязку данных, что означает, что информация может передаваться только в одном направлении.
Это изображение из рубинового гаража очень хорошо объясняет эту концепцию:
По сути, у пользователя нет возможности изменить HTML с помощью React. Когда в виртуальной DOM происходит событие, React ищет разницу между последней копией DOM и текущей и повторно визуализирует виртуальную DOM, чтобы учесть или отобразить это изменение! Вход не контролирует состояние компонента React, но у него есть событие, прослушивающее изменение, которое обновит состояние. По сути, React постоянно выполняет повторный рендеринг, хотя он настолько легкий, что часто не кажется, что выполняется так много работы.
Третий важный момент, который я хочу подчеркнуть для разработчиков, — это разница между тем, как HTML отображается как для React, так и для Angular. Хотя Angular написан на JavaScript, некоторые элементы представления записываются разработчиком в представлении на чистом HTML.
С другой стороны, в React есть комбинация HTML и JSX. Пример JSX:
const element = <h1>Hello, world!</h1>;Хотя это выглядит как HTML, на самом деле он обладает полной функциональностью JavaScript, поскольку может содержать логику кодирования, которую HTML никогда не мог бы реализовать. Эта часть часто может сбить с толку новых разработчиков, но на самом деле она довольно проста в использовании!
Это лишь некоторые из самых поверхностных различий между ними. Надеюсь, это помогло!
