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

});

页面效果

时间: 2024-12-25 23:46:48

Angular.js、React.js整合的相关文章

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

react.JS基础

1.ReactDOM.render() React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript" src

认识React.js

目录(?)[+] React并不是一个框架,React提供了一些新颖的概念.库 和编程原则让你能够同时在服务端和客户端编写快速.紧凑.漂亮的代码来构建 你的web应用. React里常用的概念或技术: ES6 React 虚拟DOM(virtual DOM) 组件驱动开发(component-driven development) 不变性(immutability) 自上而下的渲染(top-down rendering) 渲染路径和优化 打包工具, ES6, 构建请求, debugging, 路

初识React.js

React并不是一个框架,React提供了一些新颖的概念.库 和编程原则让你能够同时在服务端和客户端编写快速.紧凑.漂亮的代码来构建 你的web应用. React里常用的概念或技术: ES6 React 虚拟DOM(virtual DOM) 组件驱动开发(component-driven development) 不变性(immutability) 自上而下的渲染(top-down rendering) 渲染路径和优化 打包工具, ES6, 构建请求, debugging, 路由等 同构Reac

要不要使用React JS呢 - Angular与ReactJS的整合

MVC(Model - View - Controller)模式无论是Web开发中的前端还是后端都是比较流行的模式,ReactJS位于前端MVC模式中的View层,最多有点Controller层的特性,相当于Javascript编写的Html模板.而Data Model和Data Binding是Angular的优势,所以需要Angular与ReactJS整合.不过Flux是适应ReactJS的数据绑定需求出现的一个库,支持单向数据绑定,https://facebook.github.io/fl

Vue.js 很好,但会比 Angular 或 React 更好吗?

文章转自:http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用来构建网页界面的 JavaScript 库.同其它的一些工具结合在一起,它也可以成为一个新“框架”.通过阅读我们最近一次在ValueCoders 上发表的 文章, 你会了解到 Vue.js 是顶级的 JavaScript 框架之一,它在许多场景中可以被用来替换 Angular 和 React.这就引

Vue.js Is Good, but Is It Better Than Angular or React?

Vue.js is a JavaScript library for building web interfaces. Combining ?with some other tools It also becomes a "framework". Now,?from our last blog?on?ValueCoders, you already know that Vue.js is one of the top JavaScript frameworks and it is re

主流前端框架对比:Vue.js , React, Angular.js

个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vue.js? 1.安装 (1)script 如果项目直接通过script加载CDN文件,代码示例如下: <script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"