Vue против реакции

JavaScript Vue.js React.js CSS

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

Та же точка

React и Vue имеют много общего, они оба имеют:

  • Используя Virtual DOM, имеет собственный алгоритм рендеринга diff.
  • Предусмотрены реактивные и компонуемые компоненты представления.
  • Сосредоточьтесь на основной библиотеке, а другие функции, такие как маршрутизация и глобальное управление состоянием, оставьте связанным библиотекам.

1. Сравнение производительности во время выполнения

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

увидеть третью сторонуbenchmark, который фокусируется на реальной производительности рендеринга/обновления очень простых деревьев компонентов.

1.1 Жизненный цикл

Жизненный цикл Vue

Жизненный цикл реакции

В приложении React, когда состояние компонента изменяется, оно повторно отображает все поддерево компонентов с этим компонентом в качестве корня.

Чтобы избежать ненужного повторного рендеринга дочерних компонентов, вам нужно использовать PureComponent везде, где это возможно, или реализовать метод shouldComponentUpdate вручную. Также вам может понадобиться использовать неизменяемые структуры данных, чтобы облегчить оптимизацию ваших компонентов.

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

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

 Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。当然，对于大型应用来说，基于这一点，还是推荐使用React，毕竟可以自己决定哪些props或者state变化才进行reRender

1.2 Управление состоянием и свойства объекта

Если React удается хранить данные в состоянии состояния, он не может изменять данные.Измените данные в Setstate. setState является асинхронным. Если вам нужно использовать результат немедленно, вам нужно передать обратный вызов в setState. Подробнее см.Несколько явлений setState в React --- Узнайте, прежде чем понять

Во Vue объект состояния не нужен, данные управляются в объекте Vue атрибутом данных

2. HTML & CSS

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

2.1 JSX vs Templates

В React все функции рендеринга компонентов основаны на JSX. Использование функций рендеринга JSX имеет следующие преимущества:

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

  • Поддержка JSX в Devtools относительно продвинута по сравнению с другими доступными в настоящее время шаблонами Vue (например, линтинг, проверка типов, автодополнение в редакторе).

Хотя Vue также может использовать JSX, в основном он использует синтаксис шаблона, что также дает некоторые уникальные преимущества:

  • Для многих разработчиков, привыкших к HTML, шаблоны более естественны для чтения и записи, чем JSX. Здесь, конечно, присутствует элемент субъективного предпочтения, но если это различие ведет к повышению эффективности развития, то оно имеет объективную ценность.

  • Шаблоны на основе HTML упрощают постепенный перенос существующих приложений на Vue.

个人觉得，使用Vue的模版语法开发起来更加便捷快速。可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。

2.2 CSS для компонентов

Для Вью,

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

<style scoped>
  .container{
      display:flex;
  }
</style>

Необязательный атрибут scoped автоматически добавляет уникальный атрибут (например, data-v-8123), чтобы указать область действия CSS внутри компонента.

Для реакции,

Синтаксис другой. React использует поле className для установки класса и использует форму объекта для установки css. Конечно, обычно более уместно вводить внешние css (скомпилированные файлы sass или less).

масштаб

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

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

личное мнение

  1. По сравнению с Vue, у React более низкая стоимость обучения и его легче начать.Я лично думаю, что синтаксис шаблона будет быстрее, чем у React Jsx.

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

Категории