【问题标题】:Can angular and react play together?angular 和 react 可以一起玩吗?
【发布时间】:2015-07-03 03:41:29
【问题描述】:

我真的开始喜欢 Angular,但 React 引起了很多关注。他们真的是对立的力量吗?

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

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

React 用于 UI,但 Angular 可以处理控制器和视图……但在处理视图时反应更好?我们可以通过仅将 Angular 降级给控制器来制作更好的应用程序吗?

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

我喜欢 angular 的一件事似乎不太适用于 react 是 angular 确实允许您分离关注点,而 react 开始有点混淆这一点。至少它似乎与角度方式相反。

【问题讨论】:

    标签: angularjs reactjs


    【解决方案1】:

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

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

    我会说他们是对立的力量,因为他们解决了同样的问题。尽管 React 只是 MVC 中的 V 并且 Angular 是一个“成熟的框架”的论点被广泛流传,但 Angular 和 React 非常具有可比性。

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

    控制器

    React 不包含任何称为控制器的东西,但在 React 世界中有一个概念称为“视图控制器”,它可以很好地映射到 Angular 控制器。 React “视图控制器”被定义为任何其他 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 视图组件。

    服务和工厂

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

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

    因此,如果您喜欢 DI,那么与良好的模块系统一起实施是非常容易的。甚至还有一种非常有趣的方法,即 Pete Hunt 对 React 中的 DI 进行了全新的尝试:http://jsfiddle.net/cjL6h/

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

    我只会在您打算转移到 React 的情况下才这样做。您的应用程序将更难理解和更复杂,因为您必须同时了解 Angular 和 React。也就是说,很多人似乎都在 Angular 中使用 React,所以这只是我的看法。

    React 用于 UI,但 Angular 可以处理控制器和 视图...但是在处理视图时反应更好吗?我们能不能做得更好 通过仅将 Angular 降级给控制器的应用程序?

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

    我喜欢 angular 的一件事似乎不太真实 反应是角度真的让你有分离 担心,而 react 开始使这有点混乱。似乎 至少与角度方式相反。

    我非常不同意这一点。我发现我的 React 应用程序比我的 Angular 应用程序具有更好的关注点分离(而且我经常使用 Angular)。您只需要了解 React 的思维方式,了解 Flux 的全部内容也是一个好主意。我并不是说你不能在 Angular 中编写出色的应用程序,只是我的经验是,使用 React 比使用 Angular 更容易“落入成功的深渊”。

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

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

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

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

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

    【讨论】:

    • 谢谢。我很感激您的意见。
    【解决方案2】:

    只是一个想法:是的,我们可以将两者都用于单个项目,但这有利于学习目的,但同一个项目很难维护,并且根据当前情况成本计算更多

    【讨论】:

      【解决方案3】:

      Extjs 是当代的,如果不是直接替代 React 和 Angular。一个切线的答案是看一下 ExtReact。 ExtReact 是 ExtJs 与 React 一起玩的尝试。这样做的好处是 React 组件在 Extjs 应用程序中的可重用性。

      【讨论】:

        【解决方案4】:

        如果您发现自己同时使用 Angular 和 React,https://github.com/bcherny/ngimport 是两者之间的一个非常好的桥梁。它允许您通过import/requireing 在 Angular 和外部世界之间共享服务/提供者/工厂/值/常量,就像使用任何其他代码一样。希望这会有所帮助!

        【讨论】:

          【解决方案5】:

          是的,正如@Edward Knowles 所说,您应该使用directives 来使用React。虽然你可以使用 ngReact,但你也可以轻松地创建指令来使用 React。

          在 Angular 中,指令是将 “面向视图” 组件集成到 Angular 应用程序的最佳方式,React 是一个非常面向表示/视图层的框架。

          由于 React 使用选择器来附加和渲染页面的某些部分,因此您可以创建一个在 Angular 中工作的指令,如下所示:

          1. 您通过servicescontrollers 收集数据并在角度逻辑中对其进行操作(服务和数据层)
          2. 然后,directive 接收并可能操纵该数据(模型层的种类)
          3. 然后directive 调用React 并将信息传递给它,以便使用React 方便的函数根据需要正确呈现您的信息。 (视图层)

          这是一个很棒且相当简短的video,介绍了 Angular + React + D3 的集成以创建基本图表。

          【讨论】:

            【解决方案6】:

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

            至于速度,您应该在今年早些时候的 ng-conf 期间观看 this 精彩演讲。

            【讨论】:

            • 是的.. 我不确定我们是否能知道 angular 2 的起飞效果如何,但是 angular 1.x 的强度如此之高,似乎可能需要一会儿赶上。尤其是等待每个人都赶上 ES6。
            猜你喜欢
            • 2015-06-30
            • 2012-02-06
            • 1970-01-01
            • 2020-06-17
            • 1970-01-01
            • 1970-01-01
            • 2016-05-21
            • 2016-01-29
            • 1970-01-01
            相关资源
            最近更新 更多