angular 和 react 可以一起玩吗? [英] Can angular and react play together?

问题描述

我真的开始喜欢 angular，但 React 受到了很多关注.他们真的是敌对势力吗?

I really am coming to love angular, but react is getting a lot of attention. Are they really opposing forces?

同时使用 react 和 angular 是个好主意吗?我可否?我应该吗?

Is it a good idea to use react and angular together? Could I? Should I?

混合它们的优缺点是什么?

What are the pros and cons of mixing them?

React 是针对 UI 的，但是 angular 可以处理控制器和视图……但是在处理视图方面反应更好吗?我们可以通过仅将 angular 降级到控制器来制作更好的应用程序吗?

React is for UI, but angular can handle the controller and the view...but is react better at handling the view? Can we make a better app by relegating angular to the controller only?

做这些事情有什么好的资源吗?

Any good resources for doing these things?

我喜欢 angular 的一件事似乎在 React 中不太真实，它是 angular 确实允许您进行关注点分离，而 react 开始有点混淆这一点.至少，这似乎与 angular-way 相悖.

One thing I do like about angular that seems to be less true with react is that angular really allows you to have separation of concerns, whereas react starts to confuse this a little. It seems to be contrary to the angular-way, at least.

推荐答案

他们真的是敌对势力吗?

Are they really opposing forces?

在某种意义上它们是，而在其他某种意义上它们不是.人们肯定会在 Angular 指令中使用 React，但他们这样做主要是为了提高性能，而不是因为他们认为 React 很棒.如果你只是为了更好的性能而研究 React，那么你真的错过了 React 的价值主张.

In some sense they are, and in some other sense they aren't. People are definitely using React inside Angular directives, but they mostly do that to get a performance boost and not because they think React is awesome. And if you're only looking into React for better performance, you're really missing out on the value proposition with React.

我会说他们是对立的力量，因为他们解决了同样的问题.尽管关于 React 只是 MVC 中的 V 而 Angular 是一个成熟的框架"的论点被大量抛出，但 Angular 和 React 非常具有可比性.

I would say that they are opposing forces in that they solve the same problems. Even though the argument that React is just the V in MVC and Angular is a "full blown framework" gets thrown around a lot, Angular and React are very comparable.

Angular 有控制器和指令(以及服务和工厂)，而 React 只有组件.正因为如此，很容易将其解释为 Angular 是一个更完整的框架.但让我们剖析一下.

Angular has controllers and directives (as well as services and factories), whereas React only has components. And because of this, it's easy to interpret that as Angular being a more complete framework. But let's dissect this.

控制器

React 不包含任何称为控制器的东西，但是 React 世界中有一个概念叫做视图控制器"，它很好地映射到 Angular 控制器.React视图控制器"被定义为任何其他 React 组件，但它进行最少的渲染.它关注的是数据/状态管理，然后将该状态传递给视图组件，然后呈现该数据/状态.

React doesn't contain anything called a Controller, but there's a concept in the React world called a "view controller", which maps pretty well to Angular controllers. A react "view controller" is defined as any other React component, but it does minimal rendering. Its concern is data/state management, and then passing that state down to view components which then renders that data/state.

一个简单的例子是:

var ViewComponent = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item => <li>{item.text}</li>)}
      </ul>
    );
  }
});

var ViewController = React.createClass({
  getInitialState() {
    return {
      items: []
    };
  },
  componentDidMount() {
    SomeStore.getItems()
      .then(items => this.setState({items: items}));
  },
  render() {
    return <ViewComponent items={this.state.items} />;
  }
});

所以这里的 ViewComponent 关注渲染 HTML 的细节，而 ViewController 关注获取和管理它传递给 ViewComponent.

So the ViewComponent here is concerned about the specifics of rendering HTML, and the ViewController is concerned about getting and managing data which it passes to the ViewComponent.

指令

我认为没有人会争辩说 Angular 指令的概念很好地映射到 React 视图组件.

I don't think anyone argues that the concept of Angular directives maps pretty well to React view components.

服务和工厂

这是Angular中存在的东西，只是因为它有依赖注入的概念，并且基本上是Angular是一个比React更完整的框架"的唯一论据.如果 Angulars 的 DI 方式是否适合像 Javascript 这样的语言，以及 Javascript 是否真的需要类似的东西，因为它是如此动态，你可能会争论几天，但我们不要那样做.

This is something that exists in Angular just because it has the concept of Dependency Injection, and basically the only argument for "Angular is a more complete framework than React". You could argue for days if Angulars way of DI is a good fit in a language like Javascript, and if Javascript really needs something like it since it's so dynamic, but let's not do that.

React 不像 Angular 那样创建自己的模块系统(我认为我们都同意 Angular 模块本身没有增加什么价值)，React 允许您使用任何您喜欢的模块系统.转译了 ES6、CommonJS、AMD、普通的旧全局变量等.社区对 ES6 和 CommonJS 的看法非常一致，这是一件好事(Angular 正在通过 Angular 2 朝着这个方向发展).

Instead of creating its own module system like Angular does (and I think we can all agree that Angular modules in themselves add very little value), React allows you to use any module system you like. Transpiled ES6, CommonJS, AMD, plain old globals, etc. The community have pretty much agreed on ES6 and CommonJS, which is a good thing (and Angular is moving in that direction with Angular 2).

因此，如果您喜欢 DI，那么与一个好的模块系统一起实现是很容易的.甚至还有一种非常有趣的方法，即 Pete Hunt 对 React 中 DI 的全新看法:http://jsfiddle.net/cjL6h/

So if DI is your thing, it's very easy to implement together with a good module system. And there's even a really interesting approach of a completely new take on DI in React from Pete Hunt: http://jsfiddle.net/cjL6h/

同时使用 react 和 angular 是个好主意吗?我可否?应该我?

Is it a good idea to use react and angular together? Could I? Should I?

我只会在您打算转而使用 React 时才这样做.您的应用程序将更难理解且更复杂，因为您必须同时了解 Angular 和 React.也就是说，很多人似乎都在 Angular 中使用 React，所以这只是我的意见.

I would only do it if you're planning to move to React down the line. Your application will be harder to understand and more complex, since you have to know both Angular and React. That said, a lot of people seem to be using React inside Angular, so this is just my opinion.

React 用于 UI，但 angular 可以处理控制器和视图......但是在处理视图方面反应更好吗?我们能不能做得更好仅通过将 angular 降级到控制器来实现应用?

React is for UI, but angular can handle the controller and the view...but is react better at handling the view? Can we make a better app by relegating angular to the controller only?

正如我之前所说，这是一个常见的误解.Angular 和 React 解决了同样的问题，但方式不同.不将您的业务逻辑层绑定到 Angular 模块系统的好处是更容易迁移到其他东西.许多人将 Flux 架构与 React 一起使用，但没有任何 React 特定于 Flux.你可以在任何框架中使用 Flux 的想法.

Like I said before, this is a common misconception. Angular and React solves the same problems, but in different ways. A benefit of not tying your business logic layer to the Angular module system is that it's easier to migrate to something else. A lof of people use a Flux architecture together with React, but there's nothing React specific with Flux. You can use the Flux ideas with any framework.

我喜欢 angular 的一件事似乎不太正确反应是角度真的可以让你有分离关注，而反应开始有点混淆这一点.似乎至少与角度方式相反.

One thing I do like about angular that seems to be less true with react is that angular really allows you to have separation of concerns, whereas react starts to confuse this a little. It seems to be contrary to the angular-way, at least.

我非常不同意这一点.我发现我的 React 应用程序比我的 Angular 应用程序具有更好的关注点分离(并且我经常使用 Angular).你只需要了解 React 的思维方式，了解 Flux 的全部内容也是一个好主意.我并不是说你不能用 Angular 编写出色的应用程序，这只是我的经验，使用 React 比使用 Angular 更容易掉入成功的陷阱".

I very much disagree with this. I find my React applications to have better separation of concerns than my Angular applications (and I've used Angular a lot). You just have to understand the React way of thinking, and it's also a good idea to learn what Flux is all about. I'm not saying that you can't write great apps in Angular, it's just my experience that it's easier to "fall into the pit of success" with React than with Angular.

Angular 有一个两步学习曲线.首先，您创建一个带有作用域的控制器，向作用域添加一个数组，然后使用 ng-repeat 将其打印出来，您会惊叹于它的简单性.您添加了一个指令，这有点难以理解，但是您复制并粘贴它并且它起作用了.耶！然后当你深入挖掘时，你进入了学习曲线的第二步，你必须开始真正理解 Angular 的内部结构.您必须知道范围通过原型继承相互继承以及由此产生的后果(在所有 ng-model 表达式中需要一个点，等等).指令控制器怎么了?它们是什么以及它们与常规控制器相比如何?什么是转置?有人告诉我，我需要在指令的编译步骤中执行这个和那个，那是什么?

Angular has a two-step learning curve. At first, you create a controller with a scope, add an array to the scope and print that out with an ng-repeat and you're awestruck by how simple that was. You add a directive, which is a little more difficult to grasp, but you copy and paste it and it works. Yeay! Then as you dig deeper, you hit the second step in your learning curve where you have to start to really understand the internals of Angular. You have to know that scopes inherit from each other with prototypal inheritance and the consequences of that (need a dot in all ng-model expressions, etc). And what's up with directive controllers? What are they and how do they compare to regular controllers? And what's transclusion? And someone told me that I need to perform this and that in the compile step of my directive, what's that?

对于 React，最初的学习曲线有点陡峭.但是一旦你结束了，就没有第二步了.学习 Flux 可以被视为第二步，但学习 Flux 为您提供了新知识，这些知识也适用于其他 Javascript 框架，而Angular 指令中的编译步骤"则没有.

With React, the initial learning curve is a bit steeper. But once you're over it, there's no second step. Learning Flux could be considered a second step, but learning Flux gives you new knowledge that carries over to other Javascript frameworks as well, something the "compile step in a Angular directive" does not.

React 与 Angular 相比的另一大优势是它主要是 Javascript.React 元素上的属性只是 Javascript 对象/函数，而不是像 Angular 属性中的魔法字符串.这也意味着您的常规 linter 可以告诉您回调属性表达式是否存在错误.在 Angular 中，您必须运行代码以查看它是否有效.

Another big advantage that React has over Angular is that it's mostly just Javascript. Properties on React elements are just Javascript objects/functions instead of magic strings like in Angular attributes. This also means that your regular linter can tell you if there's an error on your callback attribute expression. In Angular, you have to run the code to see if it works.

而且由于 Javascript 已经具有块作用域，因此您无需担心在元素名称前面加上一些使它们独一无二的前缀.

And since Javascript already has block scope, you don't need to worry about prefixing your element names with something that makes them unique.

所以我是说 Angular 一文不值，你应该转向 React 吗?不，我不是.许多公司在 Angular 上投入了大量资金.但是如果你问我，Angular 中有更多的怪癖和怪癖，如果你要构建一个可维护的应用程序，你真的必须知道.您还应该考虑这样一个事实，即 Angular 2 是完全重写的，它从 React 中汲取了很多灵感(这很棒！).

So am I saying that Angular is worthless and that you should move to React? No, I'm not. A lot of companies have invested a lot in Angular. But if you ask me, there are more quirks and oddities in Angular that you really have to know about if you're going to build a maintainable application. You should also think about the fact that Angular 2 is a complete rewrite, and it has taken a lot of inspiration from React (which is great!).

这篇关于angular 和 react 可以一起玩吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！