Различия Vue and React

gistfile1.md

Различия Vue/Vuex and React/Redux

1. Во Vue данные легко мутировать из-за чего не произойдет апдейт элемента. 2 Virtual Dom сравнятся и не будет изменений. Example: Vue:

const words = this.state.words; //ссылка на массив
words.push('marklar’); //массив мутируется напрямую
this.words = words; //нет изменения

React:

this.setState(state => ({
    words: state.words.concat(['marklar’])
}));
 this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));

Конечно во Vue тоже можно избежать мутации, создав новый экземпляр массива. Но это не так очевидно, как в setState. Vue:

const words = […this.state.words, ‘marklar']

Еще один пример. Во Vue есть массив:

data: function(){
    return {
        arr: [1,5,6]
    }
}

2. При изменении массива таким образом arr[1] = 9 обновления и ререндера не произойдет, т.к. длина не меняется и Vue подписывается только на события push, pop, изменение массива через splice (меняется длина). Поскольку массив в JS под капотом - это объект. Поэтому с реактивностью и изменением данных во Vue нужно быть осторожнее. Лучше всего использовать ImmutableJS.
3. Two-way binding, работа с формами легче из-за наличия модели во Vue: v-model, $emit.
4. Отсутствие излишних хуков, например shouldComponentUpdate, componentWillReceiveProps.
5. Во Vue нет PureComponent
6. Computed properties in Vue.
7. В Реакте 16.8 вышло обновления, благодаря которому можно создавать компоненты функционально на хуках вместо классов. Подробнее. Во Vue3 планируется добавить такую же функциональность
8. Более короткое название жизненных хуков во Vue.

Vuex vs Redux

1. В Redux есть возможность подписаться на событие dispatch c помощью листенера subscribe.
2. В Vuex есть actions and mutations. Actions позволяют возвращать промисы и менять стор через mutations. Туда же передаются state and commit. Из стейта можно взять текущее состояние, а с помощью commit вызвать действие, меняющее стор.

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
actions: {
    increment(context, payload) {
      context.commit('increment', payload);
    }
}

3. В Redux немного другая структура, там объявляются actions, в которых указывается тип действия. Потом в редьюсерах в зависимости от типа сработавшего события вызывается определенное изменение стейта: Пример
4. В Редаксе необходимо описывать редьюсеры, действия и их типы. Во Vue достаточно объявить мутации и действия при необходимости.
5. RxJs observable и store.subscribe чтобы подписаться на изменения стора
6. Во Vuex доступ к стейту и его мутации ведутся через getters, setters. mapSetters, mapGetters, mapState Component.vue

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['movies', 'genres'])
  }
}

store.js

const store = new Vuex.Store({
  state: {
    movies: [
      { id: 1, name: 'La La Land', watched: true },
      { id: 2, name: 'Moonlight', watched: false }
    ],
    genres: [
      { id: 1, name: 'Comedy' },
      { id: 2, name: 'Drama' }
    ]
  }
})

В Redux state и диспатчеры привязываются к компоненту через connect. Page.js

import { connect } from 'react-redux';
const mapStateToProps = (state) => ({
  value: state.value,
});

const mapDispatchToProps = (dispatch) => ({
  incrementAction: () => dispatch(incrementAction()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Page);

Example