前端面试题--react与vue的区别

前端面试题–react与vue的区别

首先从架构层面来看，vue是MVVM架构，是一个灵活易用的渐进式双向绑定，而react并没有准确的架构模式，react准确的架构模式是调和器和渲染器，它有的是属性和状态。用属性和状态去映射视图，react，强调的是属性不可变性，单向数据流。内部的状态内部自己控制。这样的设计可能从设计上更复杂一些，但是从使用上变得更确定，更清晰了。你甚至可以理解，react 就是一个 dom 拼接工具，把数据拼成新 dom 替换旧 dom 。当然，它性能很高，会尽可能复用 dom 来提高性能。

二者的核心思想不同：Vue : 以数据响应式为核心的UI框架，它的核心思想就是把所有的数据放在一个对象里面，然后当你操作对象时，对象就会改变数据，然后监听这个改变去改变UI。
React : 用一个函数来表示一个组件，当你把数据放进去时，它就会把数据渲染到组件里面，同时，在放数据的时候，要做到 “ 不可变 ”，也就是说，更新数据时，不是改变之前的数据，而是新生成一个和之前不一样的数据并放入函数，函数会得到一个新的UI，最后更新DOM树。
简单的来说：VUE是操作对象，而react是链接对象。

二者在组件写法上不同：
Vue的组件写法是通过template的单文件组件格式。
React的组件写法是JSX+inline style，也就是吧HTML和CSS全部写进JavaScript中。
二者的diff算法不同：
VUE：简单来说，就是vue的diff算法在对新老虚拟daom进行对比时，是从节点的两侧向中间对比；如果节点的key值与元素类型相同，属性值不同，就会认为是不同节点，就会删除重建
React：react的diff算法在对新老虚拟dom进行对比是，是从节点左侧开始对比，就好比将新老虚拟dom放入两个栈中，一对多依次对比；如果节点的key值与元素类型相同，属性值不同，react会认为是同类型节点，只是修改节点属性。

React框架架构也可以从五大方向解读
1，数据流思想=>单向数据流
2，编程思想=>函数式
3，diff算法=>计算碎片化，增量diff
4，Vdom结构=>双向链表
5，事务思想=>调度算法