Что лучше react или vue

React и Vue: сильные стороны

Здравствуйте, коллеги. Мы возобновляем наши переводные публикации. Сегодняшний текст анонсирует давно назревшую новинку по веб-разработке, посвященную ультрасовременной библиотеке Vue.js. Учитывая, что у нас в ассортименте имеется сразу три отличные книги по React, а также книга по GraphQL, эта книга, несомненно, составит им хорошую компанию. О сильных сторонах Vue по сравнению с React – читайте под катом.

Многие разработчики любят сравнивать React и Vue. Кто-то останавливается на одном из этих фреймворков и упрямо придерживается его, даже не потрудившись познакомиться с другой библиотекой, которую когда-то отбраковал. Зачастую дело во времени: чтобы по-настоящему освоить все входы и выходы системы, с нею нужно работать, бороться и расти.

Конечно, неэффективно распыляться между схожими инструментами, но разве вам не любопытно? Мне – любопытно.

В интернете найдется множество сравнительных статей о том, как создать приложение в жанре «список дел» или т.п. с Vue и React, но реальные проекты редко бывают настолько просты. В реальном приложении приходится позаботиться о маршрутизации, сохранении состояния, совместимости плагинов, т.д.

Я заинтересовался не теми отличиями, что содержатся в базовой части библиотек Vue и React, а тем, каковы особенности создания реальных приложений при помощи этих фреймворков. Какой инструментарий удобнее, скажем, при разработке одностраничных приложений?

Приложения

Я использую Vue уже около двух лет, а веб-разработкой занимаюсь лет восемь. Впервые попробовав силы с Vue, я решил, что буду учить ее «в открытую», выложив в опенсорс простое приложение для ведения заметок, где будет возможность аутентификации пользователя при помощи JWT, а также полный набор CRUD-действий с заметками. В пару к нему я писал бэкендовое приложение, сделанное с использованием Koa.

Хотя, я и не испытывал острой необходимости менять фреймворк, я рассудил, что было бы неплохо выучить React. Поэтому я переделал на React мое приложение koa-vue-notes и также выложил его в опенсорс. Подумал, что такой опыт как минимум расширит мои представления о JavaScript, а, может быть, и найду себе новый любимый инструмент.

Вот домашняя страница моего приложения. Сверху – вариант с React, снизу – с Vue:

Хотя, я использую Bootstrap в моих приложениях все реже, обычно я внедряю в мои приложения новый компонент Navbar, появившийся в Bootstrap 4. Пытаясь повторить такое в Vue, я обнаружил, что Bootstrap-Vue – наилучший вариант для реализации Bootstrap 4. В React мои опыты и исследования привели меня к reactstrap.

В данном случае нужно отметить, что в конечном итоге я не стал использовать в React сетку Bootstrap, а остановился на варианте grid-styled, лучше сочетавшемся с применяемыми у меня styled-components – подробнее об этом ниже.

В приложении можно осуществлять с пользователем операции signup/login/forgot/reset, а с его заметками — create/read/edit/delete. Войдите в систему под demousername и demopassword, если лень регистрироваться.

Сравнение каталогов с исходным кодом

Первые впечатления

При работе с React сразу же становится очевидна одна вещь: придется очень плотно иметь дело с JavaScript.

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

Сравнение React-Router и Vue-Router

React-Router – это активно применяемая система маршрутизации для React. Скорость у нее отличная, однако, имея с ней дело на практике, я сталкивался с некоторыми интересными проблемами. Базовая настройка совсем простая, хотя, я не фанат объявления маршрутов прямо в HTML, как это требуется делать в React-Router v4 (в более ранних версиях React-Router ситуация была иная).

Продолжая препарировать мои маршруты, я повстречал такую проблему: как не допустить пользователей на те страницы, к которым у них не должно быть доступа. Элементарный пример: пользователь пытается открыть страницу типа account, не выполнив вход в систему. Потребовалось потратить не один час на изучение ситуации и действия методом проб и ошибок, чтобы выдать окончательное решение с применением React-Router.

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

Vue-Router – это собственная библиотека Vue, предназначенная для маршрутизации. Мне в самом деле нравится, как там можно добавлять дополнительную информацию к определениям маршрутов прямо в файле с объявлением маршрута. Посмотрите, как я закрыл пользователям доступ к страницам в Vue-Router при помощи свойства requiresAuth в определении маршрута и проверил истинность в функции router.beforeEach:

Теперь, когда мы рассмотрим код Vue, он кажется немного пространным, но именно так он и описан в документации, поэтому мне не составило труда настроить приложение. Не могу сказать того же о коде React; там, чтобы довести до ума такое же решение, мне потребовалось несколько часов. Когда в приложении требуется запрограммировать такую существенную функцию, как недопуск пользователей на те страницы, которые им не положено видеть… на такую работу не должна уходить целая ночь.

Далее, когда я пытался собирать по URL некоторые данные со страницы Edit, я обнаружил, что в самой свежей версии React-Router такая возможность оказалась удалена. Меня это… разочаровало. Думаю, я понимаю, зачем это было сделано: данные в строке запроса поступают во всевозможных видах и формах, но, позвольте, если даже параметр по URL взять невозможно – это как-то чересчур. Мне пришлось скачать библиотеку qs, чтобы правильно разбирать URL, и в ней также нашлись свои процедурные причуды. Подробное обсуждение – здесь.

На все про все, чтобы во всем разобраться, я потратил лишний час. Не самая серьезная проблема, однако, она разительно отличается от того опыта, что мне выпал с Vue-Router, а именно: поищи в документации и реализуй решение в коде. Я не пытаюсь сказать, что с Vue – не жизнь, а сказка; просто в случае с React у меня сложилось впечатление, как будто путь выдался заметно тернистее, нежели я ожидал.

Сравнение Redux и Vuex

Redux – это самое популярное хранилище данных в React, построенное по шаблону Flux. Если Flux вам не известен, поясню: это паттерн проектирования, в целом, основанный на однонаправленном потоке данных, организуемом путем диспетчеризации действий изнутри приложения. Иными словами, он все поддерживает в порядке, когда вы пытаетесь обращаться к данным из всевозможных ваших компонентов и манипулировать этими компонентами.
Вот для примера файлы из нашего хранилища Redux, где мы создаем запись при помощи actions и reducer:

Читайте также:  Что лучше моксифлоксацин или левофлоксацин

В принципе, идея такова: мы диспетчируем actions для срабатывания reducers, которые безопасно манипулируют данными из хранилища. Таким образом, каждый компонент может безопасно считывать данные и реагировать на изменения в них.

Vuex в мире Vue эквивалентен Redux. Обе библиотеки обладают в этой сфере по-настоящему великолепной собственной поддержкой. Вместо reducers Vuex использует mutations для безопасного обновления данных хранилища. Кроме небольших отличий в именовании, обе библиотеки очень похожи. Ниже я реализовал ту же самую функциональность в приложении Vue в src/store/note.js (естественно, оба примера немного сокращены):

Честно говоря, Redux показалась мне полезной и мощной библиотекой-хранилищем для React, вдохновленной принципом Flux. У меня возникли проблемы из-за лишнего стереотипного кода. Естественно, теперь, когда я во всем разобрался, все кажется простым и ясным, но опыт подсказывает, что новичку в обращении с Redux будет сложно реализовать четкий и лаконичный код для React.

Например, приходится изучать и устанавливать библиотеку redux-thunk, чтобы диспетчировать действия от других действий, и для меня это был неприятный поворот. Конечно, я потратил еще пару часов, размышляя, а не воспользоваться ли redux-saga или redux-observable вместо redux-thunk. Вот тогда у меня мозги заскрипели, ощущение как раз можно описать словом thunk.

Это была сквозная тема данного проекта. Вспомните для сравнения интеграцию с Vuex – я, например, помню, как ловил себя на мысли «неужели это со мной?», налаживая все это впервые – а я к тому моменту еще даже не успел познакомиться с паттерном проектирования Flux.

Рендеринг

Из всех деталей React страньше всего мне показалась функция рендеринга. Во Vue так просто перебирать данные и изрыгать элементы, либо отображать/скрывать данные в зависимости от переменных состояния/хранилища. В React казалось довольно неестественным, что приходится создавать цикл заметок вне рендерера.

Во Vue, если вы желаете что-либо отобразить или скрыть, просто сделайте так:

и этот код будет зависеть от истинности вашей myVariable. В React, по-видимому, приходится сделать так:

Код чуть длиннее и не поддерживает так кстати пришедшейся возможности циклического перебора, которая во Vue может быть организована при помощи v-for. Но, конечно же, когда я освоился с выполнением этих маленьких простых вещичек, они перестали казаться такими странными. В общем, привыкнуть можно, просто именно так это делается в React. Но, нельзя не отметить, насколько легко во Vue устроен доступ к данным в конкретном макете страницы. Кажется, что на самом деле маленькие вспомогательные функции по душе React.

Styled-Components

Знаете, что мне больше всего нравится в этом проекте? Styled-Components. Мне по-настоящему импонирует инкапсуляция, которую они обеспечивают. Да, во Vue можно приколоть свойство scoped в разделе вашего компонента и, в принципе, сделать то же самое.

Было что-то действительно гладкое и приятное в том, как каждый компонент превращается в маленькую «вещь в себе». Возникают небольшие сложности с передачей произвольных свойств (props), но, уладив с ними некоторые детали, работать стало приятно. Помню один пользовательский комментарий, отлично ухвативший эту мысль: «приучает тебя заранее продумывать, как будешь оформлять компоненты».

Думаю, веская причина, по которой пользователь React действительно легко в это врубается – в том, что ранее оформление компонентов было устроено несколько неуклюже. Думаю, нас немного разбаловали целым миром Однофайловых Компонентов, доступных во Vue. На этом проекте я тем более смог оценить Однофайловые компоненты – поистине убийственно хорошая фича.

Сравниваем Create-React-App и Vue-CLI

Мне действительно понравилось create-react-app. Притом, какой я фанат vue-cli, вариант create-react-app – его достойный конкурент. Рекомендую всем пользователям установить экземпляр Webpack с нуля, чтобы разобраться в деталях. Но, если вам требуется что-то солидное для продакшена, настоятельно рекомендую использовать готовые инструменты скаффолдинга.

Инструменты разработки

Также отмечу: инструменты разработки в Redux и React определенно не так хороши, как инструменты Vue, это касается как оформления и цвета, так и необходимости раскрывать гигантское дерево компонентов, просто чтобы посмотреть состояние компонента. Мне в таком режиме было довольно тяжело следить за переменными приложения.

Может быть, я что-то упускаю или пользовался версией, которая сейчас не считается в сообществе действующим стандартом. Инструменты Vue кажутся мне без преувеличения потрясающими, сработанными хорошо и на совесть, а также визуально приятными. Учитывая, сколько времени придется тратить на работу с этими инструментами, вы поймете, как важны подобные мелкие детали.

Заключение

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

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

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

Источник

Что лучше выбрать в 2020 году — React или Vue?

JavaScript-фреймворки стали неотъемлемой частью каждого современного веб-проекта. Существует множество подобных фреймворков, в результате разработчикам постоянно приходится задаваться вопросом о том, что выбрать. Искать ответ на этот вопрос придётся и в 2020 году.

Если вы это читаете — можно предположить, что вы заняты поиском фреймворка, который станет основой вашего следующего приложения. Вполне возможно, что вы ориентируетесь на ведущие технологии и размышляете о том, что вам лучше подойдёт — библиотека React или фреймворк Vue. Это — непростая дилемма, но решать её, всё равно, нужно. Вот некоторые распространённые вопросы, которыми задаются те, кто выбирает между React и Vue:

Популярность

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

Взглянем на данные 2019 года и выясним — что популярнее — React или Vue.

Вот Сведения из Google Trends. Здесь представлено несколько графиков, иллюстрирующих популярность React, Vue и Angular. Несложно заметить, что React значительно опережает Vue.

Читайте также:  что можно хорошее сказать про школу в которой ты учился сочинение

Популярность React, Vue и Angular

Теперь обратимся к результатам исследования Stack Overflow. React возглавляет рейтинг фреймворков, которые сильнее всего нравятся разработчикам. А Vue лишь немного от него отстаёт. Vue, с момента выхода в 2014 году, за довольно короткое время приобрёл немалую популярность.

Результаты исследования Stack Overflow

История

Этот JS-фреймворк создал в 2014 году Эван Ю, бывший сотрудник Google. За спиной Vue нет компаний-технических гигантов. Самый свежий релиз Vue (2.6.10) вышел 20 марта 2019 года.

С момента появления Vue прошло всего 5 лет. Это делает данный фреймворк самой молодой разработкой среди систем подобного уровня. Среди крупных компаний, использующих Vue, можно отметить Alibaba и GitLab. Одной из особенностей Vue является тот факт, что в нём прослеживается смешение возможностей некоторых других успешных JS-фреймворков.

▍React

React — это JavaScript-библиотека, которую создал не самостоятельный программист, а огромная компания. Речь идёт о Facebook. Одной из основных причин создания React было желание компании улучшить механизмы формирования интерфейсов. Эту библиотеку разработали тогда, когда в Facebook столкнулись с некоторыми проблемами, касающимися разработки и поддержки проекта.

Библиотека React известна как мощное средство для создания динамических и интерактивных пользовательских интерфейсов. 6 мая 2019 года вышла самая свежая версия React (16.8.6). Эта библиотека используется для разработки интерфейсов во многих известных компаниях. Среди них — BBC, Instagram, WhatsApp.

Производительность

Изменения в интерфейсе приложений выполняются путём модификации объектной модели документа (DOM). Существуют такие понятия, как виртуальная DOM и реальная DOM. От того, как именно организован процесс работы с DOM, серьёзно зависит производительность JavaScript-инструментов для разработки интерфейсов.

Виртуальная DOM и реальная DOM

▍React

В React используется виртуальная DOM — это легковесная система, не зависящая от браузера. Одной из основных причин популярности React является то, что эта библиотека весьма эффективно работает с DOM.

В Vue тоже используется виртуальная DOM, но, в сравнении с React, Vue отличается более высокой производительностью и стабильностью.

Поддержка сообществ

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

▍React

Поддержкой и развитием самой библиотеки React занимается Facebook. Это даёт тому, кто выбирает данную библиотеку в качестве основы фронтенда своего приложения, довольно высокий уровень уверенности в том, что React в ближайшем будущем не превратится в некий заброшенный всеми проект. Сообщество React-разработчиков создало и поддерживает множество дополнительных инструментов.

Vue — это проект, у истоков которого стоит обычный человек, а не крупная корпорация. Как результат — в первое время после появления этот фреймворк выглядел в глазах разработчиков не особенно надёжным. Однако по прошествии некоторого времени Vue стал чрезвычайно популярным, в его развитие вносит вклад множество программистов. Фактически, можно говорить о том, что именно сообщество Vue-разработчиков — это та сила, которая поддерживает проект.

Размер

Если рассматривать вопрос размера очень упрощённо, то можно сказать, что React немного больше, чем Vue. Размер React — это около 100 Кб, размер Vue — около 80 Кб. Размер JS-кода — это очень важный показатель, который оказывает сильное влияние на производительность веб-проектов. Чем он меньше, тем, естественно, лучше.

Однако тут надо отметить, что React, для реализации определённых возможностей, нуждается в сторонних библиотеках. Одна из таких возможностей — маршрутизация. Vue же — это проект, обладающий более обширным набором стандартных возможностей, хотя и при работе с Vue без дополнений тоже не обойтись. И React и Vue, всё же, обладают достаточно скромными размерами, что делает их вполне подходящими для разработки небольших приложений.

Примеры использования

Прежде чем выбирать технологию для очередного проекта, программисты и управленцы обычно интересуются тем, в каких существующих проектах эта технология уже применяется. Если говорить о том, на чём основаны React и Vue, о JavaScript и других веб-технологиях, то можно сказать, что всё это применяется в бесчисленном количестве компаний. Если же взглянуть на конкретные примеры применения React и Vue, то можно выделить, например, следующие компании.

▍React

Кривая обучаемости

Кривая обучаемости — это графическое представление изменения скорости обучения определённому знанию или виду деятельности. В нашем случае речь идёт о скорости освоения React и Vue. Известно, что Vue освоить легче, чем React.

При проведении исследования StateOfJS респондентам предлагали ответить на различные вопросы о фреймворках. Ниже показаны результаты опроса по React, Vue и Angular.

Результаты опроса по React, Vue и Angular

Вот какой смысл вкладывается в цветовое выделение фрагментов диаграмм.

Цветовая кодировка вариантов ответов на вопросы. Сверху вниз: «Никогда не слышал об этом», «Слышал, но это мне неинтересно», «Слышал, хотел бы изучить», «Пользовался, снова пользоваться не буду», «Пользовался, буду пользоваться снова».

Как видно, многие пользовались React планируют снова пользоваться этой библиотекой. Немало программистов заинтересованы в изучении React. Если же говорить о Vue, то можно отметить, что показатель использования этого фреймворка не так велик, как у React, а показатель, указывающий на заинтересованность в изучении, превышает таковой у React. Это позволяет говорить о том, что Vue — это фреймворк, который очень многие хотят попробовать. В результате, учитывая то, что Vue легче в освоении, можно ожидать, что в будущем возрастёт число тех, кто использовал Vue и планирует использовать снова.

Гибкость

▍React

Ядро React предоставляет лишь базовый функционал. При практическом использовании этой библиотеки её возможности приходится расширять. Это даёт разработчику огромный уровень гибкости в плане выбора дополнительных инструментов. Существуют средства для разработки интерфейсов, идеи, заложенные в которые, можно счесть прямо противоположными тем, которые заложены в React. Например — это Angular — фреймворк, в состав которого включено множество стандартных средств. Плюс этого — готовый набор инструментов, которые хорошо друг с другом сочетаются. Минус — отсутствие того уровня гибкости в выборе средств, который даёт React.

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

Vue, в отличие от React, даёт разработчику более обширный набор стандартных инструментов, позволяющих решать те же задачи, которые в экосистеме React обычно решают с использованием сторонних библиотек.

Читайте также:  что значит если тебе снятся вещие сны

▍Итоги

Если собрать воедино всё то, о чём мы только что говорили, то можно сделать следующие выводы:

Уважаемые читатели! Если вы недавно занимались подбором фреймворка для своего очередного веб-проекта — просим рассказать о том, что и почему вы выбрали.

Источник

Сравнение React и Vue на практическом примере

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

Он почитал документацию, посмотрел несколько учебных видео, и, хотя всё это показалось ему весьма полезным, ему хотелось по-настоящему понять, в чём заключается разница между React и Vue. Для него поиск различий между фреймворками заключался не в выяснении того, поддерживают ли они виртуальную объектную модель документа, или того, как именно они рендерят страницы. Ему хотелось, чтобы кто-нибудь объяснил бы ему особенности кода, показал бы, что в нём происходит. Он надеялся найти статью, которая посвящена раскрытию именно таких различий, прочтя которую тот, кто знал раньше лишь Vue или React (или совершенно новый в веб-разработке человек), мог бы лучше понять различия между этими фреймворками.

Однако такой статьи ему найти не удалось. Этот факт привёл его к пониманию того, что ему самому надо взять и такую статью написать, попутно разобравшись в сходствах и отличиях React и Vue. Собственно говоря, перед вами описание его эксперимента по сравнению этих двух фреймворков.

Общие положения

Для проведения эксперимента я решил создать пару довольно стандартных To-Do-приложений, которые позволяют пользователю добавлять элементы в список дел и удалять их из него. Оба приложения разработаны с использованием стандартных CLI ( create-react-app для React и vue-cli для Vue). CLI — это, если кто не знает, сокращение, которое расшифровывается как Command Line Interface, то есть — интерфейс командной строки.

Теперь предлагаю взглянуть на внешний вид приложений, о которых идёт здесь речь.

Приложения, созданные средствами Vue и React

Вот репозитории с кодом этих приложений: Vue ToDo, React ToDo.

И там и там используется абсолютно одинаковый CSS-код, единственная разница заключается в том, где именно размещены соответствующие файлы. Учитывая это, давайте взглянем на структуру проектов.

Структура проектов, использующих Vue и React

В итоге и тот и другой подход позволяют достичь одной и той же цели, при этом, при желании, ничто не мешает организовать стили иначе, что в Vue, что в React. На самом деле, тут всё сводится к личным предпочтениям того, кто создаёт веб-проект. Например, тема структурирования CSS постоянно обсуждается в сообществах разработчиков. Сейчас мы просто будем следовать стандартным подходам к работе с CSS, заложенным в CLI рассматриваемых фреймворков.

Однако прежде чем мы пойдём дальше, давайте взглянем на то, как выглядит типичный компонент Vue и React.

Вот код компонента Vue (в нашем проекте он находится в файле ToDoItem.vue ).

Вот код React-компонента (файл ToDoItem.js ).

Теперь пришло время погрузиться в детали.

Как выполняется изменение данных?

Как видите, в обоих случаях мы описываем одни и те же данные, они просто по-разному оформлены. В результате можно сказать, что передача изначальных данных компонентам в Vue и React выглядит очень и очень похоже. Но, как уже было сказано, подходы к изменению существующих данных в этих фреймворках различаются.

Теперь, когда с изменениями данных мы разобрались, поговорим о том, как, в обеих версиях нашего приложения, добавлять новые элементы в список дел.

Добавление новых элементов в список дел

▍React

Вот как это делается в React.

Для добавления нового элемента в список дел в Vue используется следующая конструкция.

Удаление элементов из списка

▍React

В React эта операция выполняется так.

Удаление элемента списка в Vue выполняется так.

В Vue требуется несколько иной подход к удалению элементов, чем тот, которым мы пользовались в React. А именно, тут надо выполнить три действия.

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

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

Это уменьшило бы число шагов, необходимых для удаления элемента списка, с трёх до двух. Как именно поступить — вопрос предпочтений разработчика.

Работа с прослушивателями событий

▍React

В React прослушиватели событий для чего-то простого, вроде события щелчка, весьма просты. Вот пример создания обработчика события click для кнопки, создающей новый элемент списка дел.

Тут всё устроено весьма просто, это очень похоже на обработку подобных событий с использованием чистого JavaScript.

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

Существует и множество сокращений, упрощающих написание прослушивателей, реагирующих на нажатия клавиш на клавиатуре. В React, как мы уже говорили, это занимает больше времени, чем в Vue. Здесь же это делается очень просто.

Передача данных дочерним компонентам

▍React

В React свойства передаются дочернему компоненту при его создании. Например, так:

В Vue свойства дочерним компонентам также передаются при их создании.

Передача данных родительскому компоненту

▍React

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

Итоги

Мы поговорили о том, как добавлять, удалять и изменять данные в приложениях, основанных на Vue и React, о том, как передавать данные, в виде свойств, от родительских компонентов дочерним, и как отправлять данные от дочерних компонентов родительским. Полагаем, что после анализа примеров сходства и различия Vue и React видны, что называется, невооружённым глазом.

Существует, конечно, множество других небольших различий между React и Vue, но хочется надеяться, что то, что мы рассмотрели здесь, послужит хорошей основой для понимания того, как работают эти фреймворки. Фреймворки часто анализируют при выборе подходящей платформы для нового проекта. Надеемся, этот материал поможет такой выбор сделать.

Уважаемые читатели! Какие различия между React и Vue, на ваш взгляд, являются самыми главными, влияющими на выбор того или иного фреймворка, например, в качестве основы для некоего проекта?

Источник

Библиотека с советами