可以角度和反应一起玩吗？

Question

我真的很喜欢棱角分明,但反应却得到了很多关注.他们真的是对立的力量吗？

将反应和角度一起使用是一个好主意吗？我可否？ 我是不是该？

混合它们的利弊是什么？

React用于UI,但angular可以处理控制器和视图......但是在处理视图时反应更好吗？我们可以通过仅将角度降级到控制器来制作更好的应用程序吗？

做这些事情的任何好资源？

我喜欢角度的一件事似乎不那么真实的反应是角度真的允许你分离关注点,而反应开始混淆这一点.它似乎与角度方式相反,至少.

Answer 1

他们真的是对立的力量吗？

从某种意义上说,它们是,而在某种意义上它们不是.人们肯定在Angular指令中使用React,但是他们大多数都是为了提高性能,而不是因为他们认为React很棒.如果您只是为了获得更好的性能而考虑React,那么您真的错过了React的价值主张.

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

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

控制器

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

一个简单的例子是:

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视图组件.

服务和工厂

这是Angular中存在的东西,因为它具有依赖注入的概念,并且基本上"Angular是比React更完整的框架"的唯一参数.如果Angulars的DI方式非常适合像Javascript这样的语言,你可以争辩好几天,如果Javascript真的需要类似它的东西,因为它是如此动态,但是我们不这样做.

而不是像Angular那样创建自己的模块系统(我认为我们都同意Angular模块本身添加的价值很小),React允许您使用任何您喜欢的模块系统.透明的ES6,CommonJS,AMD,普通的老式全球等等.社区几乎同意ES6和CommonJS,这是一件好事(Angular正朝着Angular 2的方向发展).

因此,如果DI是你的东西,那么很容易与一个好的模块系统一起实现.在Pete Hunt的React中,甚至还有一个非常有趣的方法来对DI进行全新的讨论:http://jsfiddle.net/cjL6h/

将反应和角度一起使用是一个好主意吗？我可否？我是不是该？

我只会这样做,如果你打算搬到React下线.您的应用程序将更难理解且更复杂,因为您必须同时了解Angular和React.也就是说,很多人似乎都在Angular中使用React,所以这只是我的观点.

React用于UI,但angular可以处理控制器和视图......但是在处理视图时反应更好吗？我们可以通过仅将角度降级到控制器来制作更好的应用程序吗？

就像我之前说的那样,这是一种常见的误解.Angular和React以不同的方式解决了同样的问题.不将业务逻辑层绑定到Angular模块系统的好处是,它更容易迁移到其他东西.一小部分人使用Flux架构和React,但没有任何React特定于Flux.您可以在任何框架中使用Flux创意.

我喜欢角度的一件事似乎不那么真实的反应是角度真的允许你分离关注点,而反应开始混淆这一点.它似乎与角度方式相反,至少.

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

Angular有两步学习曲线.首先,您创建一个带有作用域的控制器,将一个数组添加到作用域并使用a打印出来,ng-repeat您会对它的简单性感到惊讶.你添加了一个更难掌握的指令,但你复制并粘贴它并且它有效.Yeay!然后当你深入挖掘时,你会在你的学习曲线中迈出第二步,你必须开始真正理解Angular的内部结构.你必须知道范围继承原型继承及其后果(所有ng-model表达式中都需要一个点等).指令控制器有什么用？它们是什么以及它们与常规控制器相比如何？什么是翻译？有人告诉我,我需要执行此操作,并且在我的指令的编译步骤中,那是什么？

使用React,初始学习曲线有点陡峭.但是一旦你完成它,就没有第二步了.学习流程可以被认为是第二步,但学习Flux为您提供了新的知识,这些知识也可以转移到其他Javascript框架,"Angular指令中的编译步骤"则不然.

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

由于Javascript已经具有块范围,因此您无需担心为元素名称加上前缀,使其具有唯一性.

所以我就是说Angular毫无价值,你应该转向React？不,我不是.很多公司在Angular上投入了大量资金.但是如果你问我,Angular中有更多的怪癖和怪异,你真的要知道你是否要构建一个可维护的应用程序.您还应该考虑Angular 2是一个完全重写的事实,它从React中获得了很多灵感(这很棒!).

Answer 2

是的，您可以使用指令ngReact。在某些用例中，您可能想要这样做，但是随着今年夏天 Angular 2 的推出，我仍会坚持尝试实现它。

至于速度，你应该在今年早些时候的 ng-conf 期间观看这个精彩的演讲。