前端面试题--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值与元素类型相同属性值不同就会认为是不同节点就会删除重建
Reactreact的diff算法在对新老虚拟dom进行对比是是从节点左侧开始对比就好比将新老虚拟dom放入两个栈中一对多依次对比如果节点的key值与元素类型相同属性值不同react会认为是同类型节点只是修改节点属性。

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