Разница между React и Vue
Блогер познакомился с несколькими компаниями, и когда он увидит, что в его резюме используется фреймворк Vue.js, он спросит, можете ли вы сказать мне разницу между vue и react? Я слышал о реакции, но не использовал ее, поэтому могу только смущенно сказать, что мало что знаю о реакции. Нет, я только недавно научился реагировать (постоянно ползая по яме), и я одновременно читал некоторые сообщения в блоге, когда я был носильщиком, пожалуйста, укажите, если есть какие-то ошибки~
Кратко представьтесь
РЕАКТ - это JavaScript UI Framework, созданная Facebook, его рождение изменило мир JavaScript, самое большое изменение - это реагировать на продвижение виртуального DOM и создать новый синтаксис - JSX, JSX позволил написать HTML-код в JavaScript.
Vue — это фреймворк MVVM, разработанный Youda, который использует систему шаблонов вместо JSX.
Волна Амвей
Virtual DOM
Может быть, это немного сбивает с толку? Давайте посмотрим, что говорят другие: одно из самых больших сходств между Vue.js (версия 2.0) и React заключается в том, что они оба используют нечто, называемое «Virtual DOM». Так называемый виртуальный DOM в основном означает его название:Виртуальный DOM, виртуальное представление дерева DOM..
Виртуальный DOM — это объект JavaScript, который отображает реальный DOM, если мы хотим изменить состояние любого элемента. Затем сначала внесите изменения в виртуальный DOM, а не в реальный DOM напрямую.
// 比如在Vue中，我们将原来的节点改成这样 :
// 原DOM
<div class='box'>
<p class='label'>
<span>{{ label }}</span>
</p>
</div>
// 修改的DOM
<div class='box'>
<p class='label'>
<span>{{ label }}</span>
<span>{{ username }}</span>
</p>
</div>
Мы добавляем узел span к узлу p, чтобы был создан наш новый объект Virtual DOM. Затем новый виртуальный DOM сравнивается со старым виртуальным DOM, и разница вычисляется с помощью алгоритма сравнения, а затем эти различия будут применены к реальному DOM.
Vue «высокомерен», он утверждает, что вычисляет различия Virtual DOM быстрее., это потому что он в процессе рендеринга, потому что vue будет отслеживать сбор зависимостей каждого компонента, через сеттер/геттер и угон некоторых функций, он может точно знать изменения, и пометить статический статический узел во время компиляции процесс, в следующем При сравнении нового виртуального DOM с исходным старым виртуальным DOM пропустите статические статические узлы. Таким образом, нет необходимости повторно отображать все дерево компонентов.
📢 Если вы хотите узнать больше, вы можете ткнуть сюда:Double Eleven, пакет за полцены, чтобы понять nextTick Vue и watcher и синюю любовь Депа к жизни и смерти?
React по умолчанию сравнивает ссылки, когда состояние компонента изменяется, он повторно отображает все поддерево компонентов с компонентом в качестве корня. Если вы хотите избежать ненужного повторного рендеринга дочерних компонентов, вам нужно использовать PureComponent везде, где это возможно, или реализовать метод shouldComponentUpdate вручную. Но в Vue вы можете предположить, что это оптимизация по умолчанию.
инструменты для сборки
React использует Create-React-App, Vue использует Vue-Cli, эти два инструмента очень просты в использовании, старший брат, они могут создать для вас хорошую среду, но Create-Reacr-App заставит вас использовать webpack и Babel, и Vue-cli может создавать различные шаблоны по запросу, что более гибко в использовании.
поток данных
(Здесь я позаимствовал изображение волны старого железа Yanchuan, а ссылка будет размещена ниже)
Интуитивно мы можем видеть, что в Vue2.x это может быть только в виде parent -> Child DOM, в то время как React может передаваться только одним способом,React всегда выступал за односторонний поток данных., данные в основном передаются от родительского компонента к дочернему компоненту (через реквизиты или избыточность). Если один из реквизитов верхнего уровня (родительский) изменится, React повторно отобразит все дочерние узлы (если вы не хотите, чтобы дочерние компоненты отображались, вам потребуется PureComponent/shouldComponentUpdate для обработки этого).
📢 Сюда можно сильно тыкать,Реагировать, чтобы увидеть жизненный цикл
Отрисовка различных шаблонов
Как упоминалось ранее, шаблоны Vue и React отличаются: React отображает шаблоны через JSX, а Vue — через расширенный HTML. React реализует общий синтаксис в шаблонах с помощью собственного JS, например, условия, циклы, тернарные операторы и т. д., которые реализованы с помощью синтаксиса JS. Vue, с другой стороны, реализован в отдельном шаблоне, отдельном от кода компонента, через директивы v-if, v-for и т. д.
Лично я считаю, что лучше реагировать, например, если мы хотим сослаться на компонент, реакция импортируется напрямую, а затем ее можно вызвать прямо в рендере, но! ! После того, как vue нужно импортировать, его нужно объявить в компонентах, прежде чем его можно будет использовать Я так зол~
Вьюекс и Редукс
В Vue мы управляем состоянием через Vuex, а в React — через Redux. Но между ними все же есть различия.
В vuex мы можем ввести папку хранилища в main.js и смонтировать хранилище в новый экземпляр Vue, чтобы мы могли напрямую передаватьthis.$storeГибкое использование.
- Вы можете обновлять данные с помощью отправки и фиксации, а также читать данные с помощью this.$store.state.xx.
- Или вы можете выполнять действия vuex через mapState/mapActions
Вот пример Vuex:
// 组件
import { mapState, mapActions } from 'vuex';
export default {
computed: mapState({
userinfo: state => state.user.userinfo // get userinfo from state
}),
methods: {
...mapActions([
'setUserInfo'
])
},
mounted() {
this.$api.getUserInfo().then(res => {
this.setUserInfo(res.data); // dispatch action
})
}
}
// vuex
import * as types from '../typeActions';
const state = {
userInfo: {}
}
const actions = {
setUserInfo({ commit }, data) {
commit(types.SET_USER_INFO, { data })
}
}
const mutations = {
[types.SET_USER_INFO] (state, payload) {
state.userinfo = payload.data
}
}
export default {
state,
actions,
mutations
}
В React нам нужно, чтобы каждый компонент представлял соединение, цель которого — соединение реквизита и диспетчеризация. (Вы можете инкапсулировать его здесь самостоятельно, поэтому вам не нужно вводить его каждый разconnect(mapStateToProps, mapDispatchToProps))
Кроме того! ! ! Мы, vuex, можем напрямую отправлять действие или фиксировать обновление, но redux может только передать отправку, а затем в редукторе, получить действие и определить тип действия, чтобы выполнить соответствующую операцию, redux не может напрямую вызвать редюсер для модификации! !
Redux использует неизменяемые данные, в то время как данные Vuex являются переменными.Каждый раз, когда Redux изменяет и обновляет данные, он фактически заменяет старые данные новыми данными (каждый раз возвращая новое состояние), в то время как Vuex напрямую изменяет исходные данные.
Когда Redux обнаруживает изменения данных, он сравнивает различия по diff, а Vuex на самом деле такой же, как Vue, который сравнивается по геттеру/сеттеру, потому что зависимости собираются при использовании экземпляра vue.
📢 Тут можно ткнуть:Почему Redux хочет вернуть кровавый случай, вызванный новым состоянием
Взгляните на пример Redux
// 组件
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './action'; // 连入当前商城模块的action
class User extends React.PureComponet {
componentDidMount() {
this.props.getUserInfo();
}
render() {
return (
<div>{this.props.userInfo.username}</div>
)
}
}
const mapStateToProps = state => {
return {
userInfo: state.user.userInfo
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
...bindActionCreators(actions, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(User);
// const.js
export const GET_USERINFO = 'GET_USERINFO';
export const SET_USERINFO = 'SET_USERINFO';
// action.js
export function getUserInfo(params, callback) {
return {
type: GET_USERINFO,
params,
callback
};
}
// saga.js
function* getUserInfo({ params, callback }) {
const res = yield call(); // 发起请求
if (res.code === 0) {
yield put({
type: SET_USERINFO,
data: res.data
});
}
if (isFunction(callback)) callback(null, res);
}
// reducer.js
function userReducer(state = initReducer, action) {
switch (action.type) {
case SET_USERINFO:
return Immutable.set(state, 'userinfo', action.data);
default:
return state;
}
}
Не плохо вверх и вниз?
сейчас время2020.03.24, до выпускного, ещеvue,reactПоменялись местами, но в то время большинство из них еще оставалось вvueВплоть до выпуска (19-й выпуск выпускников) все проекты в группе использовали реакцию, и они продолжали наступать на некоторые ямы, но при постоянном использовании и непрерывном обучении я хотел бы сказать, что реакция действительно ароматная, и реагировать крючки еще ароматнее~
Шучу, на самом деле, какой из них вы используете, зависит от человека и размера проекта.Я лично думаю, что если это относительно небольшой проект, вы можете выбрать Vue.Если это сложный, средний или большой проект, это может быть лучше выбрать React.Конечно, посмотрите на вас, это не большая проблема.
Другие статьи
- Front-end slag: новое понимание рефакторинга с использованием реактивных хуков
- Непрерывная реконструкция requestAPI интерфейсным шлаком
- Реагируйте на синтетические события от мелких до глубоких
- Double Eleven Return — шаблон конструктора JS и шаблон фабрики
- Приходите, почувствуйте свой первый пакет npm всем сердцем
- Double Eleven, пакет за полцены, чтобы понять nextTick Vue и watcher и синюю любовь Депа к жизни и смерти?