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

问题描述

我真的很喜欢棱角分明，但是反应引起了很多关注.他们真的是对立的力量吗?

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可以处理控制器和视图...但是在处理视图方面反应更好?我们可以只将角度分配给控制器来制作更好的应用程序吗?

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?

我喜欢关于react似乎不太正确的一件事，那就是angular确实允许您将关注点分离，而react开始会对此造成一些混淆.至少似乎与角向相反.

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不包含任何称为Controller的内容，但是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方法非常适合Java语言之类的语言，并且由于Java的动态性很强，那么Java确实需要类似的东西，那么您可能会争论不休.

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模块本身增加的价值很小).移植了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可以处理控制器和 视图...但是在处理视图方面反应更好?我们可以做得更好吗 通过将角度仅委派给控制器来使用应用?

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一起使用，但是Flux并没有特定于React的东西.您可以在任何框架中使用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.

我喜欢的关于角度的一件事似乎不太正确 反应是棱角真的允许您分离 关注，而反应开始使这一点变得混乱.看来 至少与角度方向相反.

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!).

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