要不要使用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/flux/,Angular对Html元素是双向数据绑定,Angular的数据绑定优势,在误用和绑定太多HTML元素时会造成性能下降,因为Angular每次渲染(render)会遍历所有Html DOM元素,而React的Virtual DOM可以只改动需要更新的部分不必每次小改动就更新全部。

前面说过,在Angular JS中整合React JS的开源库:https://github.com/ngReact/ngReact ,这个库是针对Angular JS 1.3版本及之前的版本,作者推荐的react2angular, angular2react, and ngimport库也都是针对Angular JS 1.6版及之前版的。

而Angular现在版本已经是4,自从2015年发布Angular 2之后Angular JS就不再叫Angular JS而叫作Angular以适应Web和移动端的发展,Angular 2之后与AngularJS 1相比改动很大,Angular的版本修改记录:https://github.com/angular/angular/blob/master/CHANGELOG.md,有关Angular 2的改动参考此文:https://github.com/xufei/blog/issues/8

在这两篇尝试整合Angular和ReactJS的文章中,http://www.syntaxsuccess.com/viewarticle/integrating-react-with-angular-2.0https://www.packtpub.com/books/content/integrating-angular-2-react,至少有两种通用的方式:
1. Angular 2有个可选的hook钩子函数,onInit(),可以被触发来渲染(render)ReactJS的组件。
2. Angular 2以后,使用基于TypeScript语法的AtScript语言,TypeScript是Javascript的超集,支持ES6、静态类型检查、类特性,常见的Javascript库如JQuery都有TypeScript类型信息定义文件,AtScript与TypeScript同样编译成Javascript,但是比TypeScript支持元数据注解和运行时访问注解信息。
TypeScript在1.6后支持JSX编译标记(ReactJS所使用的Javascript与Html混用的语法),由于Angular和React最终都编译成Javascript,因此在编译阶段,Angular和ReactJS的代码可以互相访问。

There is a lot of discussion about different JavaScript frameworks like Angular, React, etc these days, but one uniting factor across frameworks seems to be TypeScript. As of TypeScript 1.6 the TypeScript compiler supports jsx out of the box. This is a huge help since it means we can manage both the Angular code and the React code in the same compilation step. In the end JSX is valid TypeScript that gets transpiled down to regular JavaScript. The only thing you have todo differently is tell the compiler that you are using JSX by specifying the jsx flag:

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata --experimentalDecorators --jsx react app.ts
时间: 2024-11-03 09:41:52

要不要使用React JS呢 - Angular与ReactJS的整合的相关文章

學習 React.js:用 React.js 和 Flux 創建一個簡單的購物車

Creating A Simple Shopping Cart with React.js and Flux Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第四章這也是最後一章!到現在,我們已經學習了怎樣利用 React 的 API 來創建狀態型組件,如何應用它們,以及如何運用臉書的 Flux 架構來工作的 今天我們將把所有的這一切放到一塊,來創建一個簡單的購物車應用.在現在的電商網站上,產品的詳細頁面相互依賴,而 React 有助於簡化並有效的組織它們

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

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/jque

10 个打造 React.js App 的最佳 UI 框架

在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒.Have Fun ! 1. Material-UI 基于谷歌 Material Design 设计规范的 React 组件 此外,它还是 React 的第一个 UI 套件.Material-UI具备你所需要的所有组件(甚至更多),以及可配置性极高的预定义调色板和<MuiThemeProvider>,帮助你为应用程序定制相应的

React.js入门必须知道的那些事

首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性能而使用虚拟DOM作为其不同的实现. 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持, React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单.因其新颖独特, 目前在国内还没有很多的应用.但是其性能出众,代码逻辑简单,近来越来越火.目前还

學習 React.js:用 Node 和 React.js 創建一個實時的 Twitter 流

Build A Real-Time Twitter Stream with Node and React.js By Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第二章,該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上.如果你沒有看過第一章,概念和起步,我非常建議你繼續看下去之前,回去看看. 今天我們準備創建用 React 來創建一個應用,通過 Isomorphic Javascript. Iso-啥? Isomorphic. Java

前端迷思与React.js

前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这种戏剧性的变化持续了近 6 年. 自 2013 年 5 月推出以来,ReactJS 在过去三年中已成为了 Web 开发领域的中坚力量. 任何组件与框架都有它的适用场景, 我们应该冷静分析与权衡, 先来看React.js 1 从功能开发角度说,React的思路很好.2 从页面设计角度说,传统的HTML

Facebook的Web开发三板斧:React.js、Relay和GraphQL

2015-02-26 孙镜涛  InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨越,而这将会在2015年再次上演,主角们则是Facebook的React.js.Relay和GraphQL. Eric Florenzano在该文章中提到:2003年Brad Fitzpatrick发布了Memcached,由此开启了LiveJournal架构的时代:2004年Google发布了MapRedu