react与vue有哪些异同点

前言

目前前端最流行的JS框架当属React和Vue了，随着Vue用户数量的增加，其周边生态逐渐完善基本能与React分庭抗礼。通过两个框架的学习，有时候对一些用法会有一点思考，为加深学习的思索，特翻阅了两个文档，从以下各方面进行了对比，加深了对这两个框架的认知

相同点

都支持服务器端渲染
都是用于创建UI的JavaScript库
都是数据驱动视图
都集中保持在核心库，同时也关注路由和负责处理全局状态管理的辅助库，React有redux,Vue有自己的Vuex
都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

不同点

1.模板和JSX

Vue把HTML 、CSS 与 JavaScript组合到一起，用各自的处理方式，使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
React把 HTML 语言直接写在 JavaScript 语言之中，不加任何引号，简单说这就是 JSX 的语法，它允许 HTML 、CSS 与 JavaScript 的混写

2.数据绑定不同

2.1 vue是双向数据绑定

vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据
在vue中，与数据绑定有关的有插值表达式、指令系统、*Class和Style、事件处理器和表单空间、ajax请求和计算属性

2.2 react是单向数据流

React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式
React中通过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像表单操作、触发事件、ajax请求等触发数据变化，则进行双同步

3.diff算法不同

3.1节点对比

在Vue中，当节点元素类型相同，但是className不同，认为是不同类型元素，删除重建
在React中，当节点元素类型相同，但是className不同，认为是同类型节点，只是修改节点属性

3.2列表对比

Vue的列表比对，采用从两端到中间的比对方式
React则采用从左到右依次比对的方式

当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。此时vue的对比方式更高效

4.组件通信的区别

Vue中有三种方式可以实现组件通信：父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据；子组件通过事件向父组件发送消息；通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级
React中也有对应的三种方式：父组件通过props可以向子组件传递数据或者回调；可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多

React 本身并不支持自定义事件，我们都是使用回调函数的；而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。这可能是他们二者最大的区别