Vue.js и React — необычное сравнение
-
С того момента, как я начал изучать React, он показался глотком свежего воздуха в мире фронтенда.
Я могу создавать красивые пользовательские интерфейсы только с помощью JavaScript? Внезапно у меня появилась мощь JavaScript внутри HTML и CSS?
Мне очень понравилось. Все было прекрасно.
Я пользовался этим инструментом в течение многих лет, но не мог удержаться от наблюдения за ажиотажем вокруг Vue.js Судя по всему, каждый разработчик, который его использует, очень любит его!
Несколько месяцев назад я запустил Vue в коммерческом проекте и полностью ушел с React.
Но эти фреймворки — всего лишь инструменты; Мы никогда не должны принимать строгие карьерные решения, основываясь на них.
Это фронтенд-мир — все инструменты скоро исчезнут; Новые придут быстро.
Теперь, после огромного опыта во фронтенд-разработке и фреймворках, таких как Angular.js Vue.js, React и Ember.js, позвольте мне объяснить, почему я считаю Vue.js лучшим.
Одно очень простое приложение
Сегодня мы создаем очень простое приложение как на React, так и на Vue.js. Выглядит это примерно так:
Давайте углубимся в код. Реагируйте, вы на первом месте. Это проект, созданный с помощью ; Здесь я немного видоизменил.
create-react-appApp.js
import { useState } from 'react'; function App() { const [isMagicalAnswerVisible, setIsMagicalAnswerVisible] = useState(false) return ( <div className="App"> <p className="magicalQuestion"> Which FE framework is the best? </p> <button className="magicalButton" onClick={() => setIsMagicalAnswerVisible(true)}> Find out! </button> {isMagicalAnswerVisible && <p className="magicalAnswer"> .....what is life? </p>} </div> ); } export default App;
Я хорошо знаю React, поэтому могу во всем этом разобраться. Но давайте предположим, что я ничего не знаю о React — только кое-что о разработке в вебе в целом.
Зная это, я хочу знать, что будет отображаться на экране. Когда я смотрю на браузер, я вижу там только стилизованные HTML-элементы. Не JavaScript.
А здесь — все на JavaScript! Как узнать, что на самом деле будет отображаться на экране?
Я вижу, что это возвращает некоторый код, похожий на HTML, но это не HTML. Что это?
function App()
Хорошо. Я предполагаю, что эта штука будет рендериться.
Что такое ? Почему я не могу просто использовать
class
?onClick={() => setIsMagicalAnswerVisible(true)}
почему я должен это делать, неужели я не могу просто сделать? О, теперь я получаю некоторые ошибки. Я верну стрелочную функцию, хотя и не знаю почемуonClick={setIsMagicalAnswerVisible(true)}
{isMagicalAnswerVisible && <p className=”magicalAnswer”>…..what is life?</p>}
Что это? Что там с фигурными скобками? Что, оператор JS здесь. будет рендерить, еслиisMagicalAnswerVisible === true
?Представьте себе огромный компонент. Я хочу видеть то, что я увижу на экране. Но я не могу, потому что мне приходится прокручивать первые 100 строк кода, чтобы найти оператор.return
Я доверяю именованию функций. Я верю, что они делают то, что говорят. Я не хочу сначала вдаваться в детали реализации.
Что Vue.js может предложить
<template> <p class="magical-question"> Which FE framework is the best? </p> <button class="magical-button" @click="findOutMoreAboutThatMagicalFramework"> Find out! </button> <p v-if="isMagicalAnswerVisible" class="magical-answer"> .....what is life? </p> </template> <script> export default { name: 'App', data() { return { isMagicalAnswerVisible: false } }, methods: { findOutMoreAboutThatMagicalFramework() { this.isMagicalAnswerVisible = true } } } </script>
Хм, что я здесь вижу? Ох уж этот шаблон! Думаю, я увижу этот шаблон на экране.
О, хорошо, здесь. Это HTML-файл?
class
Хм, вот , а также . Поначалу это звучит немного странно, но на самом деле даже для разрабочкика с небольшим опытом это должно быть очевидно
@click
,v-if
И это так просто.
data()
; Что это? Мне нужно будет погуглить. О, это просто состояние компонента.methods
? Довольно просто.Я точно вижу, что будет рендериться первым. Я вижу что-то, похожее на HTML.
Я хочу стилизовать свой компонент. Что мне нужно сделать? Я предполагаю, что это то же самое, что и в HTML; Я просто добавлю тег в нижнюю часть файла.
И это работает!
Кривая обучения React может быть огромной, особенно если вы имеете дело с более сложными вещами. Помните времена, когда еще не было Хуков? Так много Render Props, Higher-Order Components и куча других вещей.
Как насчет этого? Я знаю очень многих React-разработчиков, которые понятия не имеют, что происходит за кулисами.this.handleClick = this.handleClick.bind(this)
С другой стороны, с Vue.js все так просто. Это похоже на обновленную версию HTML.
Я так много работал с Vue.js за последние пару месяцев, и количество разочарований минимально.
Я могу сосредоточиться только на реальной проблеме, а не на фактической реализации.
Я все время задаюсь вопросом — как такое возможно? Я усвоил основные знания за 2 недели, и теперь могу построить почти все?
С React все было по-другому. Временами это было очень неприятно. Но я все равно любил его просто потому, что это JavaScript.
Все в JavaScript удивительно, но это просто неправда
Веб состоит из HTML, CSS и JavaScript. Если мы хотим иметь глубокое понимание этого, мы не должны путать себя с утверждением, что все является JavaScript.
С Vue.js у меня есть ощущение, что я получаю гораздо больше общих знаний, связанных с вебом, а не только с Vue.
С React все было наоборот. Вам нужно сломать свое глубокое понимание Интернета, чтобы принять этот образ мышления.
Проблема в том, что веб останется, а React исчезнет. Это не язык программирования, а просто библиотека.
Vue работает как веб. Это набор компонентов, похожих на HTML, генерирующих события, как настоящий Интернет
Да, вы не передаете функцию в качестве входного параметра. Вы перехватываете всплывшее событие, созданное дочерним компонентом.
Так же, как и в реальной сети.
Не преувеличиваю?
Хорошо, возможно!
Тем не менее, я по-прежнему могу назвать React хорошей технологией, которая продвинула веб разработку на новый уровень. Несмотря на то, что я не согласен с тем, что веб работает только на JavaScript.
Но у меня есть ощущение, что я могу лучше изучить основы с Vue, а также я могу сосредоточиться на реальной бизнес-проблеме, а не на реализации.
-
Лучше Жиквери ничего не придумали
А если серьезно, то надо сказать спасибо реакту, что мы с этого жиквери махом слезли, а до него, либо сиди свой шаблонизатор пиши (и следи за утечками, выгрузил ли ты обработчики в шаблонах перед удалением элемента, потом заного их прикрути и т д),либо разбирайся в ангуляре, который был страшно перегруженным( ну таким казался ))
-
@Jspi Ну вообще согласен полностью, vue по сути просто файлик в котором у тебя все тот же веб просто вместо html у тебя template и те же script, style. Соглы что вуй ближе к интернетам этим вашим. НО реакт - это как младший братик дурачек, а ты его все равно любишь
-
Jsx/tsx - нечитабельная галиматья
-
@Hater В смысле нахуй
-