添加到数组会导致数组中的所有项目被重新渲染答案

【问题标题】：Adding to array causes all items in array to be re-rendered添加到数组会导致数组中的所有项目被重新渲染
【发布时间】：2015-08-12 15:03:34
【问题描述】：

我有一个 (Ember-CLI 1.13.1) 数组，我正在循环该数组以使用组件显示该数组的项目。当我向该数组添加和项目时，我希望新项目被呈现，但现有项目保持不变。但是，我看到的是数组中的所有项目都被重新渲染了。

我的印象是只有新的/更改的/删除的项目才会导致重新渲染？否则，这可能（就像在我的应用程序中使用大量嵌套组件渲染数百个复杂项目的情况一样）会浪费大量处理和渲染时间，从而导致性能下降和用户暂停。

我在这里做错了吗？或者这是 Ember 的预期行为？

这个简单的例子清楚地显示了重新渲染：

application.js

export default Ember.Controller.extend({

    data : Ember.A([]),

    actions :
    {
        addData : function()
        {
            var data = this.get("data");

            data.addObject({label:data.length});
        },
    }
});

test-component.js

export default Ember.Component.extend({

    getlabel : function()
    {
        var item = this.get("item");

        Ember.Logger.log("getlabel",item.label);

        return item.label + " " + new Date;

    }.property('item.label'),

});

application.hbs

<button {{action 'addData'}}>Add</button>

{{#each data as |item|}}

    {{test-component item=item}}

{{/each}}

test-component.hbs

{{getlabel}}

每次单击按钮都会将一个对象添加到数组中，application.bhs 会循环该对象以显示列表。如您所见，getLabel 函数绑定在 item.label 上，因此由于添加项目时这不会改变，我不希望在添加项目时再次运行它。但是，正如您从日志中看到的并在屏幕上查看时间戳更改，它会被重新调用，并且组件内容会随着项目添加到数组中而重新渲染。

在此处查看实际操作：http://ember-twiddle.com/a37e6128cc07fdf3a202

所以，总结一下：

1) 为什么当我向数据中添加新项目时，Ember 会为数据中的每个项目重新渲染测试组件？

2) 有没有办法阻止它这样做，所以只有插入/删除/替换的项目才会重新渲染？

【问题讨论】：

一件奇怪的事情是，当我点击 add 时，所有项目都会发生变化，这会导致所有项目重新渲染。但我不知道为什么所有时代都在变化。
时间变化并没有导致重新渲染，它只是它的一个症状。时间不是数据的一部分，因此无法更新。我只是用它来可视化重新渲染已经发生的事实。这是非常奇怪的行为，而不是我所期望的。我想知道这是否是最近在 Ember 中出现的问题，因为我无法想象在它一直如此之前没有其他人会发现它。
经过仔细检查，我可以看到在将项目添加到数组时不会重新渲染测试组件的 DIV。但是，为数组中的每个项目调用 getLabel 函数。所以我想问题是为什么要为旧项目而不是新项目解雇？

标签： ember.js

【解决方案1】：

我在这里问了一个相关问题：http://discuss.emberjs.com/t/computed-properties-used-inside-each/8578/4

这似乎是一个 Ember 错误，已在 1.13.7 中解决。最新的 Ember-CLI 使用 Ember v.1.13.3，因此现在需要手动更新才能修复此问题。

【讨论】：