是否值得构建一个结合了AngularJs和ReactJs组件的Web应用程序

时间:2017-03-18 19:21:47

标签: angularjs reactjs

我有使用AngularJs 1.x编写的Web应用程序,因此我决定将其转换为AngularJs2或ReactJs + AngualrJs2。选择ReactJs的原因是它比AngualrJs更快,我选择AnguarJs是它的双向数据绑定,我可以保留我的遗留模型,数据绑定到ReactJs组件。我更喜欢AngualrJs数据模型而不是{{3}我决定在ReactJs中创建可重用的HTML组件,并将AngularJs模型数据绑定到其中。

使用AngualrJs + ReactJs的示例代码段

angular.module('app').directive('greeting',[function(){
    return {
        restrict:'AE',
        scope:{name:'@'},
        link: function (scope, elem, attrs){
            var GreetingSection = React.createClass({displayName: 'Greeting',
                render: function() {
                    var message = "Good morning " + this.props.data.name + ", how are you?";
                    return React.createElement('div', {className: "greeting"},message);
                }
            });
            React.renderComponent(GreetingSection({data:scope}), elem[0]);
        }
    };
}]);

我的问题是,

  1. 如果我将AngualrJs(2.x或1.x)与ReactJs组件结合使用,是否有任何性能优势?
  2. 使用AngularJs 2.x而不使用ReactJs可以实现更快的渲染吗?
  3. 请帮我做决定。

2 个答案:

答案 0 :(得分:1)

尝试一般回答

分析:

注意:我都用过

请记住,互联网上的所有表演帖子都存在MICRO秒的差异,人们开始大喊“这很快” ..“那太慢” ...您可能会注意到。两者都表现得很残酷

因此,如果您真的担心性能,请尝试根据以下条件对应用程序进行分类。

这样您就不会在ui上加载“有角度的10个库” +“反应10个库” = 20个库而无需搞乱

角度类别

  1. 著名的双向数据绑定
  2. 最适合UI Eg上的大量数据计算- rate * quantity = amount
  3. 它很顽固(键入lang,框架驱动)来创建组件。

反应类别

  1. 以简化组件和渲染而闻名
  2. 最适合UI Eg的视觉更改:在地图上添加批量标记
  3. 最糟糕的UI Eg数据计算- rate * quantity = amount。因此,如果您错过1 setState(),最终计算将是错误的

困惑:

因此,如果某人想同时使用它们,那么他并没有明确定义其用例,因为在使用了这两个库之后,他将添加额外的数十个库,这将使另一端的应用程序变慢

因此,如果人们只选择1个,而不是在非常正确的方向上使用,并且他的用例属于以上2个类别

注意:

从这两者中选择1的引人注目的决定将很大程度上取决于您是如何使用两种方式的数据绑定功能/ setState来进行大规模,严重,大规模,大型的操作。 与以两种方式进行数据绑定时一样,您必须编写setState(),而在角度上则没有这种张力。

因此,如果您的ui数据计算(例如每种形式的2..3)比react少,那么可以直接选择有角度的

例如:假设如果您在本地状态下有40次计算,例如rate * quantity = amount,那么在反应中您必须编写setState() 40次。因此您错过了1个setState并且最终数字将是错误的。因此其最好在这种情况下使用角度

例如:假设您在redux状态下有40次计算,那么写40 * 50条额外的编码行将是BULL ** IT。

进行1次计算

用角形,您将rate * quantity = amount写成用角形总共1行

但是对Action 4行,Reducer 5行,Component 3内衬进行反应,在反应中总共12行。

建议:

如果不确定,请选择角度,因为它具有所有极端情况的特征

结论:

它不值得将angular和react结合起来

答案 1 :(得分:0)

不确定同时使用两者,但是可以 您应该一起使用这些工具,看看是否可以改善您的应用程序。 Reactjs将帮助您提高渲染速度,但是angular js 2.x将帮助您提高性能