Javascript ng的反应比ng repeat慢得多（不推荐访问属性'；节点类型'；错误）

当我修改$watched对象数组时，我尝试使用ngReact而不是ngRepeat来提高性能

react组件工作正常，html显示正确。对于控制器中包含的每个标记，我想创建一个

，将

标记.title

作为文本

但是它的速度非常慢，比ngRepeat慢得多，并且控制台显示相同错误的无限列表：

[Error] Deprecated attempt to access property 'nodeType' on a non-Node object.
    n (angular.min.js, line 7)
    sa (angular.min.js, line 11)
    $digest (angular.min.js, line 129)
    $apply (angular.min.js, line 132)
    l (angular.min.js, line 85)
    O (angular.min.js, line 89)
    (funzione anonima) (angular.min.js, line 90)
    m (angular.min.js, line 89)

这里是我的React组件（在我文章的最后，是JSFIDLE链接）

HTML

我的问题。简要说明： -有一个MapBox指令，用于在页面上显示地图。1s后，它在地图上加载3个标记，以模拟ajax请求。 -对于加载的每个标记，它将被推入

面板控制器

的

列表

，该列表负责在左侧面板上显示标记的名称。名称由使用ng React的React组件显示。它可以工作，但是有一个错误会减慢整个系统的速度。

你知道有什么问题吗？

---

谢谢

感谢对我的问题的评论，我发现真正的问题不是Safari控制台显示的不推荐的错误，而是递归$digest循环的问题。使用Chrome，将显示正确的错误。但是我还没有解决这个问题，所以我发布了一个。

---

谢谢

感谢对我的问题的评论，我发现真正的问题不是Safari控制台显示的不推荐的错误，而是递归$digest循环的问题。使用Chrome，将显示正确的错误。但是我还没有解决这个问题，所以我发布了一个。

---

谢谢你

你的小提琴坏了。这是抛出模块错误。我建议将

angular.min.js

替换为完整的

angular.js

，更正其他模块加载错误，然后重新发布一个更具描述性的错误。我还看到错误

拒绝从执行脚本'https://raw.githubusercontent.com/davidchang/ngReact/master/ngReact.min.js'因为它的MIME类型（'text/plain'）不可执行，并且启用了严格的MIME类型检查。

尝试运行Fiddle时，我看不到您所说的错误。。。。这个（）是一个带有空列表的JSFIDLE版本，在这里我没有任何错误。在最初的JSFIDLE中，控制台充满了我提到的错误，因此我看不到其他任何东西。无论如何，地图正确地显示了标记的名称。我不明白为什么有人想在一个项目中同时使用Angular和React。除了技术债务之外，还有什么我不知道的原因吗？我有一个基于角度的系统。只有一个指令使用ng repeat和一个巨大的列表。。。。React应该提高其性能，所以…为什么不呢？我喜欢有棱角的，所以，如果我能在需要的地方使用react，我很高兴：）你的小提琴坏了。这是抛出模块错误。我建议将

angular.min.js

替换为完整的

angular.js

，更正其他模块加载错误，然后重新发布一个更具描述性的错误。我还看到错误

拒绝从执行脚本'https://raw.githubusercontent.com/davidchang/ngReact/master/ngReact.min.js'因为它的MIME类型（'text/plain'）不可执行，并且启用了严格的MIME类型检查。

尝试运行Fiddle时，我看不到您所说的错误。。。。这个（）是一个带有空列表的JSFIDLE版本，在这里我没有任何错误。在最初的JSFIDLE中，控制台充满了我提到的错误，因此我看不到其他任何东西。无论如何，地图正确地显示了标记的名称。我不明白为什么有人想在一个项目中同时使用Angular和React。除了技术债务之外，还有什么我不知道的原因吗？我有一个基于角度的系统。只有一个指令使用ng repeat和一个巨大的列表。。。。React应该提高其性能，所以…为什么不呢？我喜欢angular，所以，如果我能在需要的地方使用react，我很高兴：）

<!-- ctrl is the controller, having a list of markers -->
<poi-list list="ctrl.getMarkers()" ctrl="ctrl"/>

.value( "PoiList", React.createClass( {

  propTypes : {

    list: React.PropTypes.object.isRequired,
    ctrl: React.PropTypes.object.isRequired
  },

  render: function() 
   {
    var ctrl = this.props.ctrl; // directive's Controller

    var markers = this.props.list.map( function( marker, i ) 
        {//for each marker, create a button
         return React.DOM.button(  {
                                    className:'btn btn-default',
                                    onClick: function(){ctrl.doSomething(marker);},
                                    onMouseOver: function(){ctrl.doSomethingElse(marker);},                               
                                   }, marker.title
                                 ) ; 
        } );
    return React.DOM.div(null, markers);
    }


}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );