首页 > 代码库 > 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的比较