现代前端框架具备的特征分析及Vue、React对比

框架或者库最早从jquery开始,我把jquery称之为传统的库。而vue、react、ng为现代化的库。
 
jquery是2006年发布1.0版本,2013 年 5 月react开源,vue是2014年对外发版。
 
jquery在使用过程中多半充当的是库的作用,相对现在前端框架有以下几个共同点:
1,也可以js驱动
2,可以模板化
 
本文是说的特征是框架单独使用而不与webpack等工程化工具结合的时候。而现在前端框架具备的特点:
1,一般来说是js驱动
也就是需要挂载到dom节点上,才能发挥作用。而不是传统编程的直出。
2,组件化
组件化提高了复用性,提高了开发效率。
3,单页面应用
组件化加上路由,单页面应用是一个必然的结果。
4,单向数据流
单向数据流是一种数据管理方式,view只能派发action修改store,而不能直接修改。
5,虚拟DOM
虚拟dom降低了操作原生dom节点的代价。
6,模板化
7,hooks
提高组件之间状态复用
8,mvvm结构
 
react和vue对比
1,都采用了js驱动
2,都可以实现组件化
3,也具备单页面应用特点
vue的store和router是作为参数传递给构造函数的,而react的store和router是作为组件包裹在dom外面的
4,都实现了单向数据流
vue是修改store的数据,而react返回一个新的state数据。
这种机制背后当大数量时,react因为返回一个新数据,需要深拷贝,就会导致性能降低。所以react强调数据不可变性。所以react有了Immutable。Immutable确实对react性能做了优化,因此来说react适合大型项目,这里指的是数据量大且使用了store。
5,虚拟dom
vue触发虚拟dom采用的是双向数据绑定拦截触发;而react是局部更新,reactjs需要手动设置来节省更新性能。这点也是很重要的不同点。也在强调数据的不可变性。
6,模板化
vue使用html、css和js作为模板;而react保留了JavaScript的全编程能力,react对typeScript的支持效果更好。react使用jsx作为模板。
vue的模板需要在components中转,但是react不需要。
7,hooks
vue3也开发了钩子
8,mvvm结构

9,react严格意义上讲只针对MVC中的view层,Vue则是MVVM模式

10,在 Vue 中我们组合不同功能的方式是通过 mixin,而在React中我们通过 HOC (高阶组件)。其实vue中也可以使用HOC。

11,另外 Vuex 既可以 dispatch action 也可以 commit updates,而 Redux 中只能进行 dispatch,并不能直接调用 reducer 进行修改。

react强调数据的不变性,vue强调数据的可变性。这其实是框架设计底层决定的。这句话的意思是想要利用好react,规划的时候要做到数据的不可变性。这样才能更好的利用react。
vue的数据的可变性,也不是所有数据都变化才好,是说vue对数据可变性支持更好,不用考虑太多的数据不可变化的问题。
在实际使用中想要利用好react需要更好的数据不变性规划。这样也变相的提升了实际的性能。

从某个角度讲,不管是vue还是react都是一种约定流程的开发方式。

我站在山顶看风景!下面是我的家乡!
原文地址:https://www.cnblogs.com/zhensg123/p/14743653.html