Реагировать против англяджей – как два сравнения

Автор оригинала: Chris Harrington.

Цель этой статьи состоит в том, чтобы перейти на создание некоторой простой функциональности, используя угловые и реагировать на то, чтобы дать вам понимание относительно того, что потребуется, чтобы получить приложение от земли. Угловой – большая собака в этой борьбе, так как она находилась на некоторое время дольше, чем реакция, но отреагирует повышенную производительность рендеринга на стол. Этот пост не предназначен не в качестве углубленного учебника по любому из рамок. Как таковой, я не собираюсь уходить в отличную деталь для многих этих вещей.

Если вы когда-нибудь почувствуете, как будто вам нужно больше разъяснений на тему, либо бросайте мне вопрос через Twitter или комментарий ниже. Документация для углового и реагирования также довольно хорошая. Я надеюсь, что после того, как вы прочтете это, у вас будет большее понимание относительно того, к какой рамки вам подходит для использования в вашем следующем проекте. По крайней мере, у вас должен быть понять, как работает JavaScript UI Frameworks в целом.

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

Привет мир!

Угловые js.

Угловой В настоящее время существует рядом с его первоначальным выпуском в 2009 году. С тех пор он наступает долгий путь, и они до версии 1.3.8 сейчас, с полученными релизами. В последнее время был какой-то шум по поводу углового уровня 2.0, который собирается много изменить о структуре, но это длинно выходит и запланировано для выпуска когда-нибудь в 2016 году. Текущая угловая версия использует различные атрибуты и пользовательские элементы HTML, чтобы обеспечить различные атрибуты и пользовательские элементы HTML Функциональные возможности на различных элементах DOM. Они называются Директивы и очень универсален.

Крис Харрингтон Кодепен

Код настроек для углового уровня – это немного многословного, так как это требует Приложение и а контроллер , а также определения для любого Директивы Вы строите. Вышесказанный фрагмент показывает, как настроить начальное угловое приложение, затем определите контроллер и, наконец, построить Hello World Directive. Вот поломка того, что мы делаем с JavaScript.

1. Во-первых, мы инициализируем угловое приложение, позвонив angular.module и давая ему имя. Второй аргумент в этом вызове является список зависимостей, наш модуль опирается. Поскольку у нас нет никаких зависимостей, мы проходим в пустой массиве.
2. Далее мы инициализируем TestController Угловой контроллер. Это не делает ничего в данный момент, когда наша директива занимается всеми «тяжелыми» подъемами.
3. Наконец, директива определяется. Все это делает, пишет Div содержащий Hello World Text.

Угловое приложение требует, чтобы NG-App и NG-контроллер Директивы устанавливаются на различные элементы. Вот вскрытие.

1. HTML Тег имеет вышеупомянутый NG-App Директива, применяемая к нему, указывая на то, что страница отражает угловое приложение, названное «TestApp».
2. Тело Тег аннотируется с NG-контроллер Директива, которая говорит о угловании, что область контроллера должна находиться в нем.
3. Наконец, мы оказываем наши Привет-мир Директива как единственный код в организме.

Реагировать js.

Если вы никогда не слышали о Реагировать js Предполагается, что это визуализатор просмотра производительности, сделанный парнями Facebook. Многие из тяжеловесных соперников для MVVM Frameworks имеют трудное время, предоставляющее большое количество данных, как в списках и таких. Реагистрация не имеет этой проблемы, так как она делает только то, что изменилось. Например, если пользователь просматривает список из 100 элементов, отображаемых с помощью реагирования, и он или она каким-то образом меняет третий вниз, только этот пункт будет перенаправлен, оставив другие 99 предметов без изменений.

Он также использует то, что Facebook вызывает «виртуальный DOM» для некоторой повышенной производительности, написав полный рендер практически, а затем проверяя разницу между виртуальным визуальным видом и что на самом деле на DOM и создает патч. Реагирование использует файлы JSX (необязательно) для записи представлений, что означает, что JavaScript и HTML могут жить в одном файле. Это немного сдвигаемой парадигмы и привыкается к. Вам не нужно использовать JSX для записи видов реагирования, но это намного проще, чем изначальное, какое компоненты для рендеринга, поэтому я предлагаю использовать его. Если вы хотите немного больше информации о реакции, я написал более глубокий учебник для него здесь. Он также проходит через архитектуру данных потока, которую я не буду скрывать здесь.

Примечание: React Classs могут быть встроены одним из двух способов: в RAW JavaScript или в JSX, язык, который сочетает в себе HTML и JavaScript в одном формате файлов. Я использую JSX в разделах JavaScript примеров ниже. Если вы хотите больше информации, Вот документация.

Крис Харрингтон Кодепен

Реагирование требует, чтобы вы построили класс для определения HTML для рендера. Это то, что мы делаем в разделе JavaScript.

1. Мы называем Rect.CreateClass до (неудивительно) создать класс React. Этот класс – это то, что оказывается позже, которое будет добавлено в HTML-элемент для пользователя, чтобы взаимодействовать.
2. CreateClass Функция принимает объект, который должен содержать оказывать Функция, которая в том, что в нашем простом классе до сих пор. Он возвращает очень простую строку JSX, чтобы записать Hello World.
3. Последняя строка JSX используется для оказания нашего Hello World Class в Документ. Тебе Отказ

HTML для раздела RACT React NoteWorky вообще не замечает и не изменится по всей этой статье, чтобы вы могли перестать смотреть на него.

Инъекционные данные

Угловые js.

Метод угловой использует для введения данных на директивы, является через СКОРОЙ Отказ Область применения в угловом мире – это просто объект, который содержит данные для различных контролей, таких как директивы и контроллеры. Кроме того, есть объект корневого объема (впрыскивается с $ rofsscope ), который функционирует как объем верхнего уровня, доступной всеми другими угловыми компонентами. Директива может иметь один из нескольких видов объема. Во-первых, нет никакой направляющей области, что означает, что он использует область своего родителя (обычно объем контроллера). Затем есть изолированный объем, который указывает на то, что директива имеет свой собственный объем полностью отделен от объема контроллера. Как правило, область контроллера используется для введения данных в изолированную область Директивы.

По моему опыту изолированный объем – это то, что используется больше всего. Это возможно, было сбито с толку. Примещение документации должен очистить любой из этого для вас. Свойства свойства приходят в трех разных ароматах:

• Двустороннее связывание: указывает на то, что изменения, сделанные на родительском или детском масштабе, отражены в другом. Он обозначается знак равенства (=) при наращивании объема.
• Односторонний переплет: данные течет только от ребенка на родитель через функцию. Обозначается амперсандом (&).
• Привязка текста. Просто строковое значение, которое не содержит информацию об связывании. Обозначается на символ (@).

ЛЕРЕВВ

Здесь мы используем привязку текста для отправки моего имени в пример Hello World.

• Привет-мир Элемент на панели HTML теперь содержит Имя атрибут, который соответствует значению, определенному в нашем изолированном объеме.
• Наш контроллер теперь имеет определение переменной имени в его объеме.
• Директива шаблон теперь содержит ссылку на переменную области имени.
• Мы добавили раздел области в наше определение директивы, которое указывает на то, что две вещи: во-первых, что Директива должна создать изолированную область и во-вторых, что он должен содержать только параметр имени, как определено привязку текста (@). Всякий раз, когда существует эта секция области применения, определена изолированный объем.

Реагировать js.

РЕАКТ оно впрыскивает данные в свои представленные представления на время конструкции, будьте в том случае, когда корневой вид создан или через вложенное представление. Внутри класса данные, которые передаются, доступны через реквизит Свойство текущего контекста.

Крис Харрингтон Кодепен Emdmjk

• Мы добавили {Название: "Крис Харрингтон"} к созданию нашего HellowOrld Класс, который переводится в свойство реквизита внутри класса.
• JSX теперь включает ссылку на this.props.name Таким образом, мы можем сделать персонализированное приветствие.

Обработчики событий

Угловые js.

В угловых, обработчики событий обычно присваиваются различным частям вашего представления через директивы. Если бы вы уже не замечали, директивы составляют большую часть того, что делает угловую. Они используются практически все. NG-нажмите Директива – это атрибут, который можно разместить на HTML-элементах, которые подключаются к обработчику щелчков, который уже существует на локальном объеме.

Крис Харрингтон Кодепен Zypexy

• Мы добавили кнопку на наш шаблон директивы, которые устанавливают наше поздравительное сообщение на клик. У этого есть NG-нажмите Директива подожгла приветствовать метод.
• ссылка Раздел до Директивы был добавлен. Этот раздел уволен, когда директива отображается и используется для настройки таких вещей, как обработчики событий и значения по умолчанию, оба из которых происходят здесь. приветствие Свойство было установлено в пустую строку на прицелах, и мы добавили основной обработчик событий ( Greet ), чтобы обрабатывать кнопку щелчка.

Реагировать js.

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

Крис Харрингтон Кодепензккмм

Есть несколько новых вещей, которые мы представляем здесь. Большая – это идея Государство Отказ Каждый класс React имеет свое внутреннее состояние, которое не может быть изменено внешним средством. Вы можете изменить состояние директивы, позвонив SetState Способ контекста зрения. Это будет вызвать рерандер измененных элементов. Вы получаете государственные свойства, используя this.state.name Например, и вы можете даже установить данные таким образом, но если вы сделаете, рерандер не срабатывает. Хорошее правило, если вы устанавливаете данные в состоянии, используйте SetState метод.

• Получающийся стадь Функция используется для определения начального состояния вида. Без этого Это вернут нуль, потенциально ломаю вид. Если вы собираетесь установить любое состояние во время работы вашего класса, вам нужно добавить этот метод. В нашем примере мы просто устанавливаем приветствие Государственная собственность в пустую строку. Мы добавили
• приветствовать Функция действовать в качестве обработчика события после нажатия пользователя на кнопке. Говоря о которых мы добавили кнопку в HTML и используйте Regive
• OnClick событие, чтобы подключить обработчик, который является приветствовать Функция контекста.

Вложенные виды

Угловые js.

Вложенные виды в угловах осуществляются с использованием нескольких директив. Одна Директива может содержать ссылку на другую без проблем. Стоит отметить, что каждая из этих директив может иметь свой собственный выделенный объем, и любой уровень вложенных директив также будет иметь свои собственные области. Угловой использует идею Транспортировка рендерировать дочерние элементы из директивы. Транспортировка немного сложна, поэтому вот Документация Если вам это нужно. Вот быстрый пример:

Крис Харрингтон Кодепен ZXKZGL

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

• Во-первых, какое-то домашнее хозяйство. Я переместил шаблоны в Сценарий Теги в нашем HTML, чтобы держать вещи аккуратно. В нашей директиве I инициализация я сейчас хватаю шаблона HTML из этих тегов сценария.
• Я добавил обертка Директива тоже. Это очень упрощенно, содержащее только DIV, стильный с темным фоном и каким-то набиванием на стороне HTML/CSS. На стороне JavaScript директива инициализация для обертка Содержит одно свойство, которое не в нашем Привет-мир Директива: Свойство Transclude. Это свойство указывает на то, что любые дочерние элементы Директивы должны быть отображены в шаблон через встроенную угловую директиву, называемую NG-Transclude Отказ Вы можете увидеть это в HTML в обертка шаблон. Вы увидите в Привет-мир Директива HTML, что обертка Содержит детей, которые показывают наше приветствие. Эти дети оказываются в NG-Transclude Директива в нашем обертка Директива.
• Теперь есть класс CSS для установки стиля обертки. Просто фон и некоторая прокладка; ничего особенного.

Реагировать js.

Вложенные элементы в реакции намного легче собрать, по крайней мере, на мой взгляд. Это так же просто, как объявление различных классов, а затем ссылается на детский класс в методе рендеринга родительского класса.

Крис Харрингтон Codepenkwgwggy

Как в угловом примере, мы завернули мясо нашего HellowOrld HTML в новом Обертка Класс, который снова предоставляет фоновый цвет и некоторую прокладку.

• Обертка класс приходит до HellowOrld класс, потому что это требуется в HellowOrld представляющий метод. Нет необходимости делать это таким образом, но мне это нравится, так как оно дает естественный приказ о том, где сидят ваши классы. Обертка Способ рендеринга содержит один Div с классом CSS, указанным, чтобы придать нашу обертку на фоне и прокладку. Внутри этого DIV является ссылкой на специальную переменную: Это.props.children Отказ Эта переменная содержит все внутренние элементы класса при отображении в другом классе. Наше HellowOrld Класс имеет важные части нашего приветствия HTML внутри Обертка , так что это то, что оказывается в результате звонка для переменных реквизитов детей.
• Наше HellowOrld Класс теперь содержит ссылку на Обертка класс, чтобы предоставить оберточную контейнер.

Вот и все. Нет большего количества изменений для взаимодействия вещей. Это намного чище, чем угловая реализация, на мой взгляд. Если вы хотите прочитать больше по реакции реагирования детей, посмотрите здесь Отказ

Петли

Как угловые, так и реагирующие предоставляют способы рендеринга просмотров, зацикливающих некоторые данные. С угловым, это достигается через встроенный NG-Repeat Директива. В реакции ничего особенного не требуется, так как мы можем просто закрутить различные элементы HTML и поместите их в массив; преимущество использования JSX.

Угловые js.

Крис Харрингтон Кодепен OPRPBR

Здесь мы используем NG-Repeat Директива по добавлению трех приветствий при нажатии на кнопку «Приветствовать».

• Привет-мир Директива теперь имеет div после кнопки, которая использует NG-Repeat Директива. Это указывает на то, что отмеченное Div следует повторять для каждого приветствия в массиве поздравления на сфере деятельности Директивы.
• Метод приветствия на прицелах Директивы теперь добавляет три отдельных приветствия в массиве поздравления, который должен быть представлен на вид.

Реагировать js.

Структура в реакции относительно проста, поскольку JSX – это просто JavaScript, поэтому мы можем написать простую петлю JavaScript для того, чтобы сделать то, что мы хотим.

Крис Харрингтон Кодепен Рамыз

• Способ рендера в HellowOrld Класс был опровергнут для ссылки RenderGreetings Способ, который оказывает все приветствия в состоянии. Когда я впервые начал строить классы RACT, я находился под ошибочным впечатлением, что только метод Render может содержать HTML. Это определенно не так.
• приветствовать Способ теперь подталкивает три отдельных приветствия на Привет Переменная состояния.
• Получающийся стадь Метод заменяет предыдущий приветствие Переменная с новым Привет Переменная, которая устанавливается в пустой массив.

Заключение

Хотя различия между угловыми js и React JS большие, они оба могут достичь одно и то же. Если я кажусь предвзятым в том, что я здесь написал, это потому, что я предвзятый, безусловно, к реакции. Угловой является гораздо более полной фиксированной структурой, чем реагировать, что вообще не имеет никакой структуры, но это не значит много, когда я не вижу необходимость в большинстве функций, которые обеспечивает угловые. Я обнаружил, что я должен написать меньше кода, чтобы сделать больше в реакции, и реагировать лучше эффективность, чем угловые из-за реагирования реагирования виртуального DOM (который я докажу в будущем). Несмотря на то, что поддержка угловагона значительно, намного лучше, с большим сообществом и следующим, так как реагирование только начинается.

Спасибо за прочтение!