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

• Вью черезgetter/setterА также захват некоторых функций, он может точно знать изменения данных и достигать хорошей производительности без специальной оптимизации.
• React по умолчанию для сравнения ссылок, если они не оптимизированы (PureComponent/shouldComponentUpdate), это может привести к большому количеству ненужного повторного рендеринга VDOM.

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

Поскольку обычно структура уровня данных, такая какVuexа такжеRedux, так что эта часть не слишком объяснена, в последнемvuex 和 redux的区别также будет упомянуто в.

разница в потоке данных

Всем известно, что Vue по умолчанию поддерживает двустороннюю привязку. В Vue1.0 мы можем реализовать две двусторонние привязки:

1. между родительским и дочерним компонентами,propsМожет связываться в двух направлениях
2. Между компонентом и через DOMv-modelдвусторонняя привязка

Первый был удален в Vue2.x, то есть двусторонняя привязка между родительским и дочерним компонентами больше невозможна (но предоставляется синтаксический сахар, который автоматически помогает вам изменять его через события), а Vue2.x отговаривает компоненты от собственных реквизитов для любых модификаций. Так что теперь у нас есть только组件 <--> DOMДвусторонняя привязка между этим.

Однако React не поддерживает двустороннюю привязку с момента своего создания React всегда выступал за односторонний поток данных, который он назвалonChange/setState()модель.

Однако, поскольку мы обычно используемVuexтак же какReduxИ другая односторонняя структура управления состоянием потока данных, так много раз мы чувствуем, что это разница.

HoC и миксины

В Vue мы объединяем различные функции с помощью миксинов, а в React мы используем HoC (компоненты более высокого порядка).

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

Vue всегда реализовывался с использованием миксинов.

Почему не имеет Vue не реализует HOC Way?

Сущность компонента высокого порядка — это функция высокого порядка, а компоненты React — это чистая функция, поэтому функция высокого порядка очень проста для React.

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

Порекомендуйте отличную статью о том, как реализовать компоненты высшего порядка в vue.Исследуйте компоненты высшего порядка Vue

Различия в компонентной связи

На самом деле, эти две части очень похожи.

В VUE есть три способа реализации взаимодействия компонентов:

• родительский компонент черезpropsПередача данных или обратных вызовов дочерним компонентам, хотя обратные вызовы могут передаваться, но обычно мы передаем только данные и обрабатываем связь между дочерними компонентами и родительскими компонентами через механизм событий.
• Дочерний компонент отправляет сообщение родительскому компоненту через событие
• пройти черезV2.2.0добавлено вprovide/injectЧтобы получить родительские компоненты, введите данные в дочерние компоненты, которые могут охватывать несколько уровней.

Кроме того, есть такие, как посещение$parent/$childrenЯ не буду говорить о грязном пути здесь.

В React также есть три соответствующих способа:

• родительский компонент черезpropsМожет передавать данные или обратные вызовы дочерним компонентам
• в состоянии пройтиcontextобщаться между уровнями, что на самом деле то же самое, что иprovide/injectПримерно такой же эффект.

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

Различия в способах отображения шаблонов

На первый взгляд синтаксис шаблона отличается

• Шаблон React отображается JSX
• Vue отображает с помощью расширенного синтаксиса HTML

Но на самом деле это всего лишь внешнее явление, ведь React не должен полагаться на JSX. На глубинном уровне принципы работы шаблонов другие, и в этом их существенное отличие:

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

Для этого я лично предпочитаю подход реагирования, потому что он более чисто родной, и практика Vue несколько уникальна и сделает HTML очень хаотично. Например, преимущества реакции:

Функция Render в React предназначена для поддержки закрывающих функций, поэтому наши компоненты IMPORT можно вызывать непосредственно в Render. Однако в VUE из-за того, что данные, используемые в шаблоне, должны быть подвешеныthisВ прошлый раз был сделан перевод, поэтому мыimportПосле завершения компонента необходимоcomponentsChina Re заявляет, что это очень странная, но неизбежная практика.

Разница между Vuex и Redux

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

В Вексе,$storeОн напрямую внедряется в экземпляр компонента, поэтому его можно использовать более гибко:

• использоватьdispatchа такжеcommitОтправить обновление
• пройти черезmapStateИли напрямуюthis.$storeчитать данные

В Redux нам нужно отобразить каждый компонентconnectпоставить то что нужноpropsа такжеdispatchсоедините их.

Кроме того, Vuex более гибкий, и компонент может либоdispatchдействие также можетcommitОбновления, но только в reduxdispatch, и его нельзя изменить напрямую, вызвав редьюсер.

Из принципа реализации самое большое отличие состоит в двух моментах:

• Redux использует неизменяемые данные, а данные Vuex изменяемы. Redux каждый раз заменяет старое состояние новым состоянием, в то время как Vuex напрямую изменяет
• Когда Redux обнаруживает изменения данных, он сравнивает различия через diff, в то время как Vuex фактически работает по тому же принципу, что и Vue.getter/setterДля сравнения (если вы посмотрите на исходный код Vuex, вы узнаете, что на самом деле он напрямую создает экземпляр Vue внутри для отслеживания изменений данных)

而这两点的区别，其实也是因为 React 和 Vue的设计理念上的区别。 React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。 из