reactjs，react和js语法上的区别讲解
大家好，如果您还对reactjs不太了解，没有关系，今天就由本站为大家分享reactjs的知识，包括react和js语法上的区别讲解的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
如何利用React.js开发出强大Web应用
。以下列代码作为范例：
<script src="http://fb.me/react-0.13.0.js"></script><script src="http://fb.me/JSXTransformer-0.13.0.js"></script></head><body><script type="text/jsx">/**@jsx React.DOM*/</script></body></html>
组件结构
React.js当中的应用程序必须通过已经在层级结构当中布置完成的组件加以构成。如果大家希望在开发工作当中轻松使用应用程序的每个组成部分，那么必须首先拿出时间弄清楚其在层级结构中的具体作用并以此为基础勾勒应用原型。这意味着，每个组件都负责解决一项特定任务。而在某些复杂组件当中，我们还需要将其拆分成数个简单组件，从而确保一次只解决一个问题。这也是我们充分发挥React.js强大能力的必要前提。
属性与状态
React.js当中的数据主要分为两种类型：
·属性：这类数据会在不同组件之间往来传递
·状态：这类数据会始终被保存在某组件当中
组件的属性（即往来于不同组件间的信息）不可修改与变更，但组件的状态却能够随时加以调整（即组件内部的信息）。这代表着React.js中的一切都具备与之对应的真实源。
因此，当我们利用React.js创建一款应用程序时，必须要在Web应用开发中做出一项决策——各组件拥有怎样的数据，这些数据的主来源又是什么。一旦解决了这个问题，大家就能够轻松完成应用创建的其它工作。
在这种情况下，我们只需要考量三种数据类型：
网络数据
用户输入数据
预测数据
具体来参考以下示意图：
其中网络数据将由网络及线路组件所获取。其通常代表着大量数据，而且为了不影响应用的运行速度，大家需要在外部对其加以处理，而后再把结果交付至我们创建的应用。
组件通信机制
在这里，数据被设计为自上而下贯穿整个组件结构，但大家有时候也需要以自下而上的方式逆向交付数据以实现应用程序交互性。在这种情况下，我们就需要利用特定的技术手段实现这种“数据逆流”。下面来看几种实现此类目标的方式：
·大家可以选择使用回调属性的方式，这是最理想也最简单的解决方案，因为此时组件只需要同其直接上游对象进行数据共享。React.js能够自动对每个实例者组件方法绑定，因此维护工作不会占用我们大量精力。下面来看具体示例：
return;}}); var Child= React.createClass({ render: function(){ return Click me;}});
·如果大家希望实现的是其它抵达通知机制，那么可以利用单一系统实现发布/订阅。这种方式非常灵活而且同样易于维护。只需使用PubSubJS这类库，大家就能够随意对某一组件的生命周期方法进行绑定与解绑。
相关代码示例如下：
var Parent= React.createClass({ handleMyEvent: function(e){...}, componentWillMount: function(){ window.addEventListener("my-event", this.handleMyEvent, false);}, componentWillUnmount: function(){ window.removeEventListener("my-event", this.handleMyEvent, false);}, render: function(){...}}); var Grandchild= React.createClass({ handleClick: function(e){ var customEvent= new CustomEvent("my-event",{ detail:{...}, bubbles: true}); React.findDOMNode(this.refs.link).dispatchEvent(customEvent);}, render: function(){ return Click me;}});
组件生命周期
组件永远拥有着与其API紧密关联的生命周期。在这种情况下，其生命周期包括启动、更新与卸载三种状态。而这些功能已经被内置在组件的定义当中。举例来说：
componentWillMount与componentWillUnmount方法都被用于添加或者移除事件侦听机制。当然还有其它多种方法能够帮助我们实现对组件状态及属性的控制。
一旦我们建立起一套浏览器内运行环境，接下来就可以将UI方案拆分为多个简单组件。接下来的任务是弄清应用程序运行需要具备哪些数据，这些数据将处于何种位置且如何与应用进行共享。当这些问题得到解决，大家将能够获得可进行试用体验的已创建应用。
利用React.js，我们能够非常轻松地开发出强大且稳定的Web应用程序。这主要是因为大家需要使用的全部功能都能够由该框架自行提供，而且其在初始设计之时就充分考虑到创建高复杂性应用程序的种种需要。
react和js语法上的区别讲解
JavaScript是一门语言，jquery和 react是人家使用JavaScript封装出来的一个库，jquery是函数工具库， react则是UI工具库，至于库是什么？打个比方
，拿件衣服做比方，JavaScript则是线，jquery，react则是布，线可以一步一步织成布，然后再织成衣服，但是一般情况下这样做就会太慢，所以人们就会想
办法去极大简化工作流程，所以就会有一些人先把线做成布，然后给别人用，别人会用布了就可以直接织成衣服了，就省去了很多不必要的麻烦和工序。就
加大了生产效率。但布也有不好的地方，就是你必须使用别人织好的东西，不能十分灵活地用你的线发挥你自己的想象去完成自己的作品。其实很多东西你要
用现实生活中的事物去理解，很多抽象的东西其实也是客观世界中的一种反应。
这么多人吹捧ReactJS,但是真的好吗
最近用react做了一个聊天类型的应用，说一下大概的看法吧：
言简意赅的说，react+redux+immutable+其它辅助lib的方案，在多状态、多交互的产品中，还是有很大的应用场景，一图胜千言：
以下是根据自己体验和社区经验，得出的一些想法：
mvvm是架构层面的模式，函数式是编程上的范式，两者不是对立面，react+flux是函数式，mvvm里一样可以用函数式，恰恰在不少 mvvm的实现框架中，FPR是很重要的实现双绑的方案：比如 ReactiveCocoa用到的 RAC。
是否有实际的案例去证明，应用规模大了后，mvvm就不能用了？非要你的 flux？ flux才出现多久，以前用 mvvm实现的大规模应用都是假的？
react支持者都是直接根据官方文档照读：双绑很混乱，flux才能解决一切，事实是，你喜欢单向数据流，mvvm一样支持啊，不要双绑就行了呀。
react我没有实际用过，不发表负面评论，但让我觉得比较亮的是透明的virtual dom和同构方案。
性能这块，ng未必会比 react慢，但不好的地方在于，ng需要知道 track by这些黑魔法才能做到优化，而很多开发者并不知道这点，在这上面，react是领先的。
virtual dom的引入也让 react脱离了视图的具体实现，可以很方便的切换底层平台，这是一个大优势，而 ng2的架构也会做到这点。
react是 view层，你要愿意，mvvm里的 v同样可以用 react来做，不要随便把 mvvm和 react等价，认为只有 react能用 flux，认为 react只能用于 flux。
用还是不用？客观：因地制宜主观：因人而异其实：你高兴就好
React真的比AngularJS快吗
React自诞生以来，一直以其渲染速度快著称，特别与AngularJS和EmberJS等相比更是如此。但也有人不同意这个观点，以色列软件开发公司500Tech的CEO Boris Dinkevich近日发表博文称，其实React并不真正比AngularJS快。
React之所以被人们认为快的原因，是因为DOM操作起来很慢，而React采用了Virtual DOM来避免直接对DOM进行操作。Boris认为，实际上官方并没有提供Demo来说明性能提升了多少，而Virtual DOM带来的Javascript对数据的复杂操作可能会抵消它的好处。在考察了演示React和AngularJS对比的两个广为传播的Demo后，Boris的结论是，基于Virtual DOM的框架并不比传统的框架要快。
第一个大家看得最多的Demo来自于React.js Conf 2015上的演示，内容是React和AngularJS的对比（Demo：React，AngularJS）。Boris发现，这个demo其实对AngularJS并不公平，因为demo作者忽视了AngularJS里基本的提升性能的语句“track by”。只需简单的修改一行代码，将原来的：
ng-repeat="(key, db) in databases"
修改为：
ng-repeat="(key, db) in databases track by key"
就可以看到，修改后的AngularJS Demo速度大大提升，并不比React的表现要慢。
第二个Demo来自于ng-conf 2015的演示，可以看到在Angular的指令中使用React后速度显著提升。但Boris认为这个对比并不公平，因为它演示的是React组件渲染对比Angular渲染和数据处理。在Angular Demo里选择使用isolated scope后，结果显示两者之间的速度差别不大。
Boris的文章在Hacker News上引起了激烈讨论，有些人认为作者言过其实，他们在自己的项目中使用React部分代替Angular后速度快了很多；也有些人拥护作者的观点，认为React在过去的一段时间里被过度营销，一些Demo并未考虑实际情况。但还有一些人则认为速度并不是React的卖点，用户feedjoelpie表示：
React只是使用起来非常友好并且易于理解，是virtual DOM让这一切成为可能，同时速度能够让人接受。DOM diff的目标并不在于让React变得比它的同胞更快，而是让你不用再考虑DOM，取而代之的是关注你前端的全局状态。
OK，本文到此结束，希望对大家有所帮助。