オブジェクトの $watched 配列を変更するときのパフォーマンスを向上させるために、ngRepeat の代わりに ngReact を使用しようとしています。
反応コンポーネントが動作し、html が正しく表示されます。<button>
コントローラーに含まれるマーカーごとに、marker.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 コンポーネントです (記事の最後に JSfiddle リンクがあります)。
HTML
<!-- ctrl is the controller, having a list of markers -->
<poi-list list="ctrl.getMarkers()" ctrl="ctrl"/>
JS
.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' );
} );
これは私の問題の (新しいバージョン) JSFiddleです。簡単な説明: - ページにマップを表示するための MapBox ディレクティブがあります。1 秒後、地図上に 3 つのマーカーをロードして、ajax リクエストをシミュレートします。- ロードされたマーカーごとに、左側のパネルにマーカーの名前を表示する役割を持つlist
がプッシュされます。PanelController
名前は、ng-React を使用して、React コンポーネントによって表示されます。動作しますが、システム全体を遅くするエラーがあります。
何が問題になる可能性がありますか?ありがとうございました