今天的考核题目: 你知道React和Vue的区别吗? skr，skr

React 和 Vue 的区别

博主面了几家公司，看简历上写着使用Vue.js框架，就会问，你能说一说 vue 和 react的区别吗 ？react 听过，没用过，所以就只能尴尬的说不怎么了解react。这不，最近刚学了react (不断爬坑中)，同时看了些博客文章，当一回搬运工，如有错误，请指出 ～

简单的自我介绍一下

React是由Facebook创建的JavaScript UI框架，它的诞生改变了JavaScript世界，最大的一个改变就是React推广了Virtual DOM， 并且创造了新的语法 - JSX，JSX 允许在JavaScript中写html代码。

Vue是由尤大大开发的一个MVVM框架，它采用的是模板系统而不是JSX。

安利一波

Virtual DOM

一听可能有点懵逼 ？我们来看看别人怎么说的 ：Vue.js(2.0版本)与React的其中最大一个相似之处，就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM，DOM树的虚拟表现。

Virtual DOM 是一个映射真实DOM的JavaScript对象，如果我们要改变任何元素的状态。那么是先在Virtual 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>
    

我们往p节点中新增了一个span节点，于是我们一个新的Virtual DOM对象会被创建。然后新的Virtual DOM 和旧的Virtual DOM比较，通过diff算法，算出差异，然后这些差异就会被应用在真实的DOM上

Vue 很“ 嚣张 ”，它宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，由于vue会跟踪每一个组件的依赖收集，通过setter / getter 以及一些函数的劫持，能够精确地知道变化，并在编译过程标记了static静态节点，在接下来新的Virtual DOM 并且和原来旧的 Virtual DOM进行比较时候，跳过static静态节点。所以不需要重新渲染整个组件树。

📢 如果你想知道更多，你可以狠狠戳这里: 双十一，打包半价理解Vue的nextTick与watcher以及Dep的蓝色生死恋？

React默认是通过比较引用的方式进行，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如果想避免不必要的子组件重新渲染，你需要在所有可能的地方使用PureComponent，或者手动实现shouldComponentUpdate方法。但是Vue中，你可以认定它是默认的优化。

构建工具

React 采用 Create-React-App， Vue 采用的是Vue-Cli，这两个工具非常的好用啊，大兄弟，都能为你创建一个好环境，不过 Create-Reacr-App 会逼迫你使用webpack和Babel，而 Vue-cli 可以按需创建不同的模板，使用起来更加灵活一点

数据流

（这里借用一波言川老铁的图，下边会贴出链接）

很直观的，我们可以看到，在Vue2.x中，只能parent -> Child <-> DOM的形式，而React只能单向传递，React一直提倡的是单向数据流，数据主要从父组件传递到子组件（通过props，或者redux）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点（如果你不想子组件进行渲染，那你需要PureComponent/shouldComponentUpdate进行处理）。

📢 你可以狠狠的戳这里，看React的生命周期

模板渲染方式不同

前面说了，Vue和React的模板有所区别，React是通过JSX来渲染模板，而Vue是通过扩展的HTML来进行模板的渲染。React通过原生JS实现模板中的常见语法，比如说条件啊、循环啊、三元运算符啊等，都是通过JS语法实现。而Vue是在和组件代码分离的单独模板中，通过指令v-if、v-for等实现。

个人认为react比较好点，比如我们要引用一个组件，react直接import 引入，然后可以直接在render中调用了，但是！！vue需要import之后，还要在components里去声明，才能用，好气哦 ～

Vuex 和 Redux

在Vue中，我们是通过Vuex进行状态管理，而在React中，我们是通过Redux进行状态管理。但是这两者在使用上还是有区别的。

在vuex中，我们可以通过在main.js中，引入 store文件夹，并把store挂载到new Vue实例中，这样我们可以直接通过 this.$store 灵活使用。

• 你可以通过dispatch和commit进行更新数据，通过this.$store.state.xx读取数据
• 或者你可以通过mapState / mapActions 进行vuex的操作

下边是一个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，目的就是把 props 和 dispatch 连接起来。（这里可以自行封装一下，这样不需要每次都引入connect(mapStateToProps, mapDispatchToProps)）

另外！！！我们 vuex 可以直接 dispatch action 也可以 commit update，但是redux只能通过dispatch，然后在reducer里，接收到action，通过判断action的type，从而进行对应的操作，redux不能直接调用reducer进行修改！！

Redux使用的是不可变的数据，而Vuex的数据是可变的，Redux每次修改更新数据，其实就是用新的数据替换旧的数据（每次返回的都是一个新的state），而Vuex是直接修改原数据

Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的，因为在vue实例的时候，进行了依赖收集。

📢 你可以狠狠戳这里: 为什么redux要返回一个新的state引发的血案

来看一下 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届毕业生)，组里的项目都是用的react，同时不断踩一些坑，但是随着不断使用，以及不断学习，我想说，react真香，react hooks 更香 ~

开个玩笑，其实使用哪个都看个人以及项目大小吧，个人觉得如果是一个相对较小的项目，那你可以选择 vue，如果是一个复杂中大型一点的，可能还是选 react 比较好，当然，看你啦，问题不大。

其他文章

• 前端渣渣对使用react hooks进行重构的新认识
• 前端渣渣对requestAPI的不断重构之路
• 由浅到深的React合成事件
• 双十一返场-JS构造器模式与工厂模式
• 来，用心感受自己的第一个npm包
• 双十一，打包半价理解Vue的nextTick与watcher以及Dep的蓝色生死恋？

相关链接

• 📢 个人博客
• Vue 官网 - 对比其他框架
• 言川 - 关于Vue和React区别的一些笔
• 众成翻译 - Vue vs React: Javascript 框架之战