[Перевод] Vue.js или React? Какой из них вы бы выбрали? Почему?

JavaScript Программа перевода самородков Vue.js React.js

Vue.js или React? Какой из них вы бы выбрали? Почему?

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

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

Знаете вы это или нет, но Vue углубляет идею однофайловых компонентов. Файл состоит из шаблонов, скриптов, стилей, этих самостоятельных модулей. Некоторым людям удобно разрабатывать таким образом, потому что разработка каждого модуля похожа на традиционный процесс разработки интерфейса. Мне лично нравится такой модуль не потому что он "похож на html", а потому что он как ориентир на странице, он структурирован и легко идентифицируется, а сам файл можно быстро найти по ориентиру. Комбинация JS и JSX в React работает хорошо, но все же немного сбивает с толку (особенно когда вы добавляете в композицию стилизованные компоненты). И вы игнорируете это и привыкаете к этому. Важно отметить: React требует этапа компиляции при использовании SFC (компоненты без сохранения состояния), а Vue — нет. Просто потому, что JSX требует шага компиляции, вам нужно подумать об этом, когда вы рассматриваете React. Если вы хотите объединить несколько файлов сценариев в один проект без компиляции, то React действительно не лучший выбор, если только вы не планируете отказаться от JSX и использоватьReact.createElement(). В этом случае Vue — очевидный лучший выбор.

Другие комментарии о Vue: он использует DSL (предметно-ориентированный язык) и имеет большой API. И то, и другое верно, по крайней мере, у него больше API, чем у React, но он все же относительно мал по сравнению с другими библиотеками. Два случая являются отдельными, но связанными. DSL, используемый Vue, — это просто еще одна абстракция, как и SFC. Они разработаны таким образом, чтобы вы могли быть более продуктивными и сохранять свой код чистым и понятным. JXS существует по той же причине, это тоже нестандартная абстракция, но позволяет раскрыть всю мощь JavaScript. JSX — это не JavaScript и никогда им не будет, скажем, руководство по стилю кода airbnb запрещает его в.jsФайлы содержат JSX, потому что они нестандартизированы. они должны быть в своем.jsxзапустить в файле.

Как только вы узнаете, что DSL Vue включает в себя множество вспомогательных методов и сокращений, чтобы сделать вас более эффективным, это вопрос личных предпочтений, выбирать его или нет. Другими словами (Примечание переводчика: если вы выберете Vue), у вас будет больше специального синтаксиса для изучения. Есть люди, которые обсуждают когнитивную нагрузку изучения новых API, что необходимо (хотя я не согласен), но я с ними поспорю: с другой стороны, из-за этого простые API означают, что React также создает большую когнитивную нагрузку. нам, потому что нам нужно использовать относительно сложные шаблоны для выполнения определенного контента. Я объясню это. ~ Не будем забывать, что количество API для React постоянно увеличивается и продолжает увеличиваться с разумной скоростью. Недавно мы получили контекстный API, и в какой-то момент в будущем мы также получим Time Slicing и Suspense. ~ Также обратите внимание, что React также управляется обновлениями. Команда React заботится о потребностях пользователей и вносит изменения там, где они считают это целесообразным. Контекст, Time Slicing, Suspense — эти функции были добавлены или будут добавлены. Несмотря на это, React API, вероятно, останется кратким, а функции будут добавляться только тогда, когда они имеют смысл.

Стоит отметить, что документация Vue — отличный пример документации API, и она очень краткая. Документация React средняя, ​​но ладно, его API проще, поэтому само собой разумеется, что вам не нужно слишком много читать документацию.Этот комментарий подвергся критике, но я поддерживаю его, потому что другие документы ужасны и не делают документы React хорошими, они действительно средние по сравнению с Vue. Я не говорю, что документация React особенно плоха, она просто посредственная по сравнению с тем, что вы ожидаете от отличной библиотеки.

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

Все это означает, что вам не нужно использовать шаблоны Vue и DSL, если вы этого не хотите. Вы можете просто использовать JSX из React или функцию createElement(). Вы также можете выбрать свой собственный язык шаблонов, например Pug. Не знаю, заметили ли вы, что Vue очень гибок в этом отношении. Он может использовать SFC для написания реальных компонентов пользовательского интерфейса, использовать JS только для написания компонентов без рендеринга (только выходные блоки кода скрипта, исключая шаблон и стиль), а затем переключаться на JSX или функции рендеринга в соответствии с вашими потребностями. Этот подход даст вам невероятный контроль над тем, как все работает, и сохранит ваш код в чистоте.

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

Это не означает, что Vue проще, чем React, или что React особенно запутан (вложенные слоты, по крайней мере, так же сложны, как реквизиты рендеринга/FaCC). Ключевой момент, который многие упускают из виду, заключается в том, что с React вам нужно изучить эти шаблоны как можно скорее (их используют многие популярные библиотеки), но вложенные слоты в Vue используются не так часто. Для этого есть много причин, и опять же, важное различие заключается не в том, что может делать каждый из этих фреймворков, а в том, как часто сложные шаблоны используются для решения общих задач.

Они оба мощные фреймворки со своими сильными сторонами, все, что вы можете сделать с одним и другим (действительно много). У React более крупная экосистема с лучшими инструментами и большим количеством рабочих мест. Vue легче подобрать, он обладает большой гибкостью, его API позволяет избежать некоторых сложных шаблонов в React, и он работает более идиоматично, как «Vue». Например, передача сообщений родительскому компоненту вместо передачи функции обратного вызова в качестве свойства. Это делает ваш код чище, но это также дополнительная абстракция. Vue имеет гораздо больше основных библиотек, тесно интегрированных с Vue, и они работают почти так же, как аналогичные подходы в других фреймворках. В React меньше основных библиотек (некоторые из стандартных функций Vue должны импортировать библиотеку, когда они появляются в React, например, проверка типов свойств), но в целом больше библиотек (предоставляется сообществом). Стоит иметь в виду, что по мере роста экосистемы у вас появляется множество библиотек, которые делают одно и то же, большинство библиотек, которые я использовал в React или Vue, в значительной степени являются теми же фреймворками, которые вы выбираете (React или Vue). Помимо стиля, это не имеет значения (React заставит вас переосмыслить стиль, что неплохо), поэтому то, что вам нужно сделать, чтобы добиться этого, может измениться.На мой взгляд, конечное влияние сильной экосистемы заключается в том, что проблемы, с которыми вы сталкиваетесь, скорее всего, будут решены другими, что является огромным бонусом от популярности React и важным соображением.

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

Примечание автора: я забыл упомянуть vue-cli, который похож на create-react-app+. Это действительно отличный инструмент для быстрого создания визуальных пользовательских интерфейсов, что доставляет массу удовольствия. Так что в каком-то смысле инструменты Vue действительно крутые. Я также забыл упомянуть, что интеграция Typescript в Vue на данный момент не очень хороша, возможно, в React будет лучше работать с TS. Стоит изучить.

Иди попробуй.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории