在 Angular 中使用 React 组件的开源库 NgReact

NgReact 详细介绍

React.js库可以用作Web应用程序中的视图组件。 ngReact 让你可以在 AngularJS 应用程序中使用 React 组件。

作用：

• 您需要比 Angular 更高的性能，而由于虚拟 DOM 和其他优化，React通常性能更好

• React提供了一种更简单的方法来思考您的UI的状态; 相比于以双向数据绑定在控制器和视图之间传输数据的两种方式，React通常避开这种更多单向/反应范式

• React 社区中的某个人发布了您想要尝试的组件

• 你已经深入Angular应用程序，但是想尝试React

安装

通过Bower安装：

bower install ngReact

或通过npm:

npm install ngreact

使用

然后，只要确保Angular，React和ngReact在页面上，

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>

并将 'react' Angular 模块作为您的新应用程序的依赖项

<script>
    angular.module('app', ['react']);
</script>

你就可以使用它了。

特性

ngReact 由以下部分组成：

• react-component，一个Angular指令，用于委托给一个React组件

• reactDirective，用于将React组件转换为 react-component Angular 指令的服务

ngReact可以在现有的angular应用中使用，以用react 组件替换整个或部分视图。