Question

问题：这是一个很好的做法，即使它通过减少观察者来提高绩效

使用Angular 1.5。创建一个表（带有无限滚动），其中几乎每个单元格的内容都是一个组件。

在任何给定时间页面上都有超过500名观察者，这在向下滚动时会导致渲染延迟。

为了减少绑定，我希望始终将数据从父组件传递给子组件作为字符串（当我传递对象时为JSON字符串）一次性绑定 < / p> 像这样：

//In parent component (table component) controller:

this.name = "bob"
this.info = {city: "ABC", country: "AAA", zip: "100001", location "123 ABC"};
this.JSONStringifiedInfo = JSON.strigify(this.info);

// In parent view
<table>
<tr>
<table-cell-component-1 info={::$ctrl.JSONStringifiedInfo } name={::$ctrl.name}></table-cell-component-1>
</td>...


//and now in table-cell-component-1 controller

...
 bindings: {
    info: '@',
    name: '@'
},

this.parseInfo = JSON.parse(this.info);
this.name = ...

//and I then just use $ctrl.parseInfo in template...

Answer 1

一次性绑定

以::开头的表达式被视为一次性表达式。一次性表达式将在稳定后停止重新计算，如果表达式结果是非未定义的值，则会在第一次摘要后发生。

-- AngularJS Developer Guide - Expressions - One-Time Binding

使用一次性 单向绑定来减少摘要周期开销：

 <my-component info="::$ctrl.infoObject"></my-component>

JS

 app.component("myComponent", {
     bindings: {info: "<"},
     template: '<p>{{::$ctrl.info}}</p>',
 });

我应该传递一个JSON字符串与一次性绑定到组件，以减少观察者

1 个答案:

一次性绑定