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