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

標籤：定義   compiler   one   syntax   script   angularjs   運行   tde   jquery   

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

  

 

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