首页 > 代码库 > react和vue,angular的比较
react和vue,angular的比较
就这几天我所了解到react情况和大家探讨一下子react的知识:
react由facebook团队维护的一套框架,已经应用在instagram网站上了,react以其独特的性能优化方案,正在被越来越多的前端工程师所接受。
angular是对dom元素的扩展,让dom元素实现一些功能,ng-show可以让元素显示隐藏,ng-repeat重复创建,ng-class切换类等,这些指令为dom添加功能同时,
也会为dom元素开销,打个比方,比如页面是一个汽车,angular做法就是为其镶嵌边框,给汽车装饰,结果就是汽车漂亮,很高大上,另一方面,我们也要开足马力
,才能开动这个汽车。react则另起炉灶,自己创建一个汽车,增加四个轱辘,添加一个发动机,这样只需很小的马力,就能驱动这个汽车。
了解完了区别之后,我们就谈一谈react的一些特点:
1.首先,react它受用的是虚拟的dom;
2.高效,react通过对dom的模拟,最大限度的减少dom的交互;
3.组件化开发,react采用组件化开发,极大限度的使组件得到复用,便于开发管理额维护;
4.适用多端,一处多发,多端适用
有了这些优点,我们就可以开发高性能的网站,什么是高性能的网站,它有以下几方面的要求:
1.减少http连接请求;
2.避免重新定向链接;
3.要把部分内容压缩;
4.避免css样式表达式;
5.减少NDS查找;
6.避免重定向链接;
7.减少大量DOM操作;
接下来说一下react的基本语法:
jsx是javascript xml的缩写形式,jsx有自己的优势和不足,优势有方便管理,不足为不能运行在浏览器当中,需要第三方转换工具;
react的语法工具和angular和vue差不多,都是{{}}的形式,但是react的执行顺序当中,它有生命周期,一般分为四个:
1.mounting这个周期是在创建阶段;
2.updating这个阶段是更新阶段;
3.render这个阶段是路由阶段,
4.unmounting这个阶段是销毁阶段;
接下来我们谈一谈react组件化开发:第一步,我们首先要按层级拆分组件,拆分组件的时候我们要遵循单一职责原则,还有就是UI和组件层级对应;
2.第二步,开发静态版本,不用state,只用props,数据放在最顶层的组件中,构建应用的顺序;
3.第三部,分析最少量state,但是完备,首先,状态越少越好维护,比如,Todo List显示总条数
这里我们就要问了,它是从父级传过来的吗?这时在确定原始产品数组;如它是从父级传过来的,那么它就是一个state;
他会经常改变吗?这是要确定用户输入的关键字,如果它经常改变,那么它应该是一个state;
它能通过其他state和props计算出来吗?这是我们要确定的复选框的状态以及过滤之后的产品数组;如果它能通过其他state和props计算出来,那他就不是一个state;
这是判断一个state的依据;
第四步:分析state应该属于那个组件,找到所有需要用到这个state的组件;
找到他们的公共祖先组件,此组件或者是它的祖先组件应该拥有这个state;
如果找不到合适的,可以创建一个新的组件,它包含了所有用到这个state的组件;
.FilterableProductTable需要用到state来展示过滤后的产品,
.SearchBar需要用到state来展示搜索内容和复选框状态
他们的共同祖先组件是FilterableProductTable
第五步:构建反向数据流,将搜索框和复选框的改变通知给FilterableProductTable从而形成了一个子组件--父组件--子组件的循环
讲完了这些,我们将上面的总结一下,
我们划分组件是按照层级划分的;
state最好尽可能的少,但是必须要完备
理解单向数据流的含义以及单向数据流的使用。
2017-06-18
react和vue,angular的比较