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

Posted 2020-09-10

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.0，https://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