出处：http://www.jb51.cc/article/p-merkwkmp-yc.html

必备知识

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,0); Box-sizing: border-Box;">'jquery'</span>: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'libs/jquery-2.1.3/jquery.min'</span>,<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'angular'</span>: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'libs/angular-1.3.15/angular.min'</span>,0); Box-sizing: border-Box;">'React'</span>: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'libs/react-0.13.3/react.min'</span>,<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 使用JSX方式编写React，其依赖以下三个文件</span>
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// React JSX</span>
    <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'JSXTransformer'</span>: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'libs/react-0.13.3/JSXTransformer'</span>,0); Box-sizing: border-Box;">// require jsx</span>
    <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'jsx'</span>: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'libs/react-0.13.3/jsx'</span>,0); Box-sizing: border-Box;">// require text</span>
    <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'text'</span>: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'libs/react-0.13.3/text'</span>
  },shim: {
    <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'angular'</span>: {
      deps: [<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'jquery'</span>],exports: <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'angular'</span>
    },0); Box-sizing: border-Box;">'React'</span>: {
      exports: <span class="hljs-string" style="color: rgb(0,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); Box-sizing: border-Box;">// 依赖名称必须为React(首字母)，否则JSX解析后无法找到React</span>
define([<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'React'</span>],<span class="hljs-function" style="Box-sizing: border-Box;"><span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">function</span><span class="hljs-params" style="color: rgb(102,102); Box-sizing: border-Box;">(React)</span> {</span>
  <span class="hljs-keyword" style="color: rgb(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,102); Box-sizing: border-Box;">()</span> {</span>
      <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> elapsed = <span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">Math</span>.round(<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">this</span>.props.elapsed  / <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">100</span>);
      <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> seconds = elapsed / <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">10</span> + (elapsed % <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">10</span> ? <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">''</span> : <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'.0'</span> );
      <span class="hljs-comment" style="color: rgb(136,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); Box-sizing: border-Box;">// 所以依赖名称要为React，否则React -> undefined</span>
      <span class="hljs-keyword" style="color: rgb(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); Box-sizing: border-Box;"><<span class="hljs-title" style="Box-sizing: border-Box; color: rgb(0,136);">p</span>></span>React has been successfully running for {seconds} seconds.<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;"></<span class="hljs-title" style="Box-sizing: border-Box; color: rgb(0,136);">p</span>></span>;</span>
    }
  });

  <span class="hljs-keyword" style="color: rgb(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,136); Box-sizing: border-Box;">return</span> {now: <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">new</span> <span class="hljs-built_in" style="color: rgb(102,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,136); Box-sizing: border-Box;">var</span> that = <span class="hljs-keyword" style="color: rgb(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,102); Box-sizing: border-Box;">()</span> {</span>
        that.setState({now: <span class="hljs-keyword" style="color: rgb(0,102); Box-sizing: border-Box;">Date</span>()});
      },<span class="hljs-number" style="color: rgb(0,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,136); Box-sizing: border-Box;">var</span> elapsed = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">this</span>.state.now.getTime() - <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">this</span>.props.start.getTime();
      <span class="hljs-keyword" style="color: rgb(0,136);">TimeMessage</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">elapsed</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">{elapsed}</span> /></span>;</span>
    }
  });

  <span class="hljs-keyword" style="color: rgb(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,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组件

Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; 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,0); Box-sizing: border-Box;">'angularApp'</span>,0); Box-sizing: border-Box;">'React'</span>,0); Box-sizing: border-Box;">'jsx!jsxdir/Timer'</span>  <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 使用jsx!XXXX形式引入</span>
],136); Box-sizing: border-Box;">function</span> <span class="hljs-params" style="color: rgb(102,102); Box-sizing: border-Box;">(
  angularApp,React,Timer
)</span> {</span>
  <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 在angular controller中使用React组件，同理在Directive的link中使用</span>
  angularApp.controller(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'welcomeCtrl'</span>,[<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'$scope'</span>,102); Box-sizing: border-Box;">($scope)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> start = <span class="hljs-keyword" style="color: rgb(0,102); Box-sizing: border-Box;">Date</span>();
    Timer = React.createFactory(Timer);

    React.render(
        Timer({start: start}),0); Box-sizing: border-Box;">// 页面中div元素</span>
        document.getElementById(<span class="hljs-string" style="color: rgb(0,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,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>

页面 效果

原文链接：https://www.f2er.com/angularjs/149749.html

Angular.js、React.js整合