Angular.js、React.js整合

页面导航:首页 > 网络编程 > JavaScript > Angular.js、React.js整合

Angular.js、React.js整合

来源: 作者: 时间:2016-01-23 10:23 【

必备知识Requirejs、Angularjs、Reactjs,可查看本博客写的相关内容进行必备知识了解。整合Angular js、React js本人在angular js之爱恨情仇中已提到过Angular js的性能问题,而React js基于virtual dom的

必备知识

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 

React has been successfully running for {seconds} seconds.

; } }); 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 ; } }); 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')
    );
  }]);

});

页面效果

angular-react-result

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<