React 和 Vue的区别

一.共同点

1. 都是mvvm 框架，都是数据和视图分离，修改视图，不是通过直接修改，而是通过修改数据来驱动视图变化。这是MVVM框架区别于jq直接操作dom的区别。

 Vue修改数据：this.data = newVal这种形式就可以修改。而React 需要通过setState来修改

 

2.两者在模板渲染的实现上都是使用VNode的思想。

Vue的template最终解析成一个render函数，而render函数最后返回一颗虚拟DOM树；

React 本身就是直接写render函数，使用JSX的写法，最后返回的也是一棵虚拟DOM树；

核心方法都是createElement方法。

3.模板渲染都是异步的。

Vue修改数据后，直接获取Dom是旧的Dom。使用nextTick确保新的Dom渲染完成；

React修改数据，setState本身就是异步出来。如果修改数据后，要操作Dom，可以使用回调函数：

setState({
    index: 1
}}, function(){
    console.log(this.state.index);
})

为什么要异步渲染？

a.开发者有可能多次修改数据，每次修改都执行render函数，性能消耗太大

b.从浏览器的渲染原理来说，浏览器在执行js的时候，dom的渲染是被阻塞的。所以即使修改数据后，立即render函数，浏览器也看不到结果。所以干脆对数据修改处理完以后，再统一一次性执行render函数。

4.两块框架在使用中，实现中小项目，都没什么问题。

二.区别

1.Vue 模板和逻辑的分开更彻底：有template和js文件可以分开写。模板文件会更清晰。template的很多指令需要先学习一下。需要记住的内置指令比较多。

2.React 使用JSX的写法，模板和逻辑耦合在一起。有时看起来还是比较不优雅的。但是JSX写法更方便，没有那么多指令需要学习。而且JSX已经成为一种规范。

 

三.如何选择

1.Vue学习成本更低。适合小团队快速开发。而且国内社区也更活跃。

2.React适合团队水平更高一点的。