Angular.js、React.js整合

必備知識

Requirejs、Angularjs、Reactjs，可查看本博客寫的相關內容進行必備知識瞭解。

整合Angular.js、React.js

本人在angular.js之愛恨情仇中已提到過Angular.js的性能問題，而React.js基於virtual dom的方式渲染頁面，在性能上有不錯的表現，所以在系統中整合了React.js。

Requirejs配置

requirejs.config({
  baseUrl: '/',
  paths: {
    'jquery': 'libs/jquery-2.1.3/jquery.min',
    'angular': 'libs/angular-1.3.15/angular.min',
    'React': 'libs/react-0.13.3/react.min',
    // 使用JSX方式編寫React，其依賴以下三個文件
    // React JSX
    'JSXTransformer': 'libs/react-0.13.3/JSXTransformer',
    // require jsx
    'jsx': 'libs/react-0.13.3/jsx',
    // require text
    'text': 'libs/react-0.13.3/text'
  },
  shim: {
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'React': {
      exports: 'React'
    }
  },
  waitSeconds: 0
});

計時器組件Timer

使用Reactjs編寫計時器組件Timer。
注意： JSX文件所在目錄不要取名爲jsx，否則會導致解析失敗。
Timer.js

// 依賴名稱必須爲React(首字母)，否則JSX解析後無法找到React
define(['React'], function(React) {
  var TimeMessage = React.createClass({
    render: function() {
      var elapsed = Math.round(this.props.elapsed  / 100);
      var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
      // 在此處JSX將解析爲return React.createElement("p", null, "React has been successfully running for ", seconds, " seconds.");
      // 所以依賴名稱要爲React，否則React -> undefined
      return <p>React has been successfully running for {seconds} seconds.</p>;
    }
  });

  var Timer = React.createClass({
    getInitialState: function() {
      return {now: new Date()};
    },

    componentDidMount: function() {
      var that = this;
      setInterval(function() {
        that.setState({now: new Date()});
      }, 50);
    },

    render: function() {
      var elapsed = this.state.now.getTime() - this.props.start.getTime();
      return <TimeMessage elapsed={elapsed} />;
    }
  });

  return Timer;
});

Angular.js使用React組件

define([
  'angularApp', 'React',
  'jsx!jsxdir/Timer'  // 使用jsx!XXXX形式引入
], function (
  angularApp, React,
  Timer
) {
  // 在angular controller中使用React組件，同理在Directive的link中使用
  angularApp.controller('welcomeCtrl', ['$scope', function($scope) {
    var start = new Date();
    Timer = React.createFactory(Timer);

    React.render(
        Timer({start: start}),
        // 頁面中div元素
        document.getElementById('testJSX')
    );
  }]);

});

頁面效果