Angular.js、React.js整合
2016-03-30 11:43
633 查看
出处:/article/2392646.html
Requirejs、Angularjs、Reactjs,可查看本博客写的相关内容进行必备知识了解。
本人在angular.js之爱恨情仇中已提到过Angular.js的性能问题,而React.js基于virtual dom的方式渲染页面,在性能上有不错的表现,所以在系统中整合了React.js。
使用Reactjs编写计时器组件Timer。
注意: JSX文件所在目录不要取名为jsx,否则会导致解析失败。
Timer.js
必备知识
Requirejs、Angularjs、Reactjs,可查看本博客写的相关内容进行必备知识了解。
整合Angular.js、React.js
本人在angular.js之爱恨情仇中已提到过Angular.js的性能问题,而React.js基于virtual dom的方式渲染页面,在性能上有不错的表现,所以在系统中整合了React.js。
Requirejs配置
<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">requirejs.config({ baseUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/'</span>, paths: { <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'jquery'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'libs/jquery-2.1.3/jquery.min'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'angular'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'libs/angular-1.3.15/angular.min'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'React'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'libs/react-0.13.3/react.min'</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 使用JSX方式编写React,其依赖以下三个文件</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// React JSX</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'JSXTransformer'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'libs/react-0.13.3/JSXTransformer'</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// require jsx</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'jsx'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'libs/react-0.13.3/jsx'</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// require text</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'text'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'libs/react-0.13.3/text'</span> }, shim: { <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'angular'</span>: { deps: [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'jquery'</span>], exports: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'angular'</span> }, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'React'</span>: { exports: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'React'</span> } }, waitSeconds: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul>
计时器组件Timer
使用Reactjs编写计时器组件Timer。注意: JSX文件所在目录不要取名为jsx,否则会导致解析失败。
Timer.js
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 依赖名称必须为React(首字母),否则JSX解析后无法找到React</span> define([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'React'</span>], <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(React)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> TimeMessage = React.createClass({ render: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> elapsed = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.round(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.elapsed / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> seconds = elapsed / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span> + (elapsed % <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span> ? <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'.0'</span> ); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 在此处JSX将解析为return React.createElement("p", null, "React has been successfully running for ", seconds, " seconds.");</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 所以依赖名称要为React,否则React -> undefined</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>React has been successfully running for {seconds} seconds.<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>;</span> } }); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> Timer = React.createClass({ getInitialState: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> {now: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Date</span>()}; }, componentDidMount: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> that = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>; setInterval(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> that.setState({now: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Date</span>()}); }, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>); }, render: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> elapsed = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.state.now.getTime() - <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.start.getTime(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">TimeMessage</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">elapsed</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">{elapsed}</span> /></span>;</span> } }); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> Timer; });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li></ul>
Angular.js使用React组件
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">define([ <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'angularApp'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'React'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'jsx!jsxdir/Timer'</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 使用jsx!XXXX形式引入</span> ], <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">( angularApp, React, Timer )</span> {</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 在angular controller中使用React组件,同理在Directive的link中使用</span> angularApp.controller(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'welcomeCtrl'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$scope'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($scope)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> start = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Date</span>(); Timer = React.createFactory(Timer); React.render( Timer({start: start}), <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 页面中div元素</span> document.getElementById(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'testJSX'</span>) ); }]); });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>
页面效果
相关文章推荐
- React Native第3天——常用组件和常见Q&A
- react開發環境搭建
- MVVM 模式优化MVC模式之With ReactiveCocoa
- React.js入门学习第一篇
- 基于React.js实现原生js拖拽效果引发的思考
- MVVM With ReactiveCocoa
- React组件生命周期
- React Native for Android 发布独立的安装包
- 夜晚 十点 React-Native 源码 暴力畜 系列
- 配置React Native环境
- 知乎上关于ReactNative的评论汇总(网友们有才哟...)
- 深入浅出React Native 3: 从零开始写一个Hello World
- 使用Typescript编写Redux+Reactjs应用程序
- React.js实现原生js拖拽效果及思考
- ReactiveCocoa
- ReactJS学习笔记(一)-深入理解ReactJS的面向组件即对象
- 深入浅出React(一):React的设计哲学 - 简单之美
- [React] React Router: Named Components
- [React] React Router: Route Parameters
- 搭建react-native过程中,cmd中输入npm install -g react-native-cli出现nmp error 404