angularjs - angular 和 react 可以一起玩吗？

Question

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

一起使用 react 和 angular 是个好主意吗？我可否？ 我是不是该？

混合它们的优点和缺点是什么？

React 适用于 UI，但 angular 可以处理 Controller 和 View ……但是在处理 View 方面 react 更好吗？我们可以通过仅将 angular 降级到 Controller 来制作更好的应用程序吗？

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

我喜欢的关于 angular 的一件事似乎对 react 不太正确，那就是 angular 确实允许您分离关注点，而 react 开始有点混淆这一点。至少，这似乎与 angular-way 相悖。

Answer 1

Are they really opposing forces?

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

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

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

Controller

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

一个简单的例子是:

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 的数据.

指令

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

服务和工厂

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

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

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

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

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

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 解决了同样的问题，但方式不同。不将您的业务逻辑层绑定(bind)到 Angular 模块系统的好处是更容易迁移到其他东西。许多人将 Flux 架构与 React 一起使用，但没有任何 React 特定于 Flux。你可以在任何框架中使用 Flux 的想法。

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 更容易“掉入成功的陷阱”。

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

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

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

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

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