angular - 是什么导致角度列表重绘以及如何减轻它？

Question

我有一个带有聊天页面的 Ionic 4 Angular 应用程序。它最多可显示 50 条聊天消息，并具有用于发送消息的输入。

消息列表是从 Google 的 Firestore 中检索出来的，并作为 observable 提供给应用程序。这是我显示消息的方式。

<ion-list class="chat-list">
        <ion-item *ngFor="let msg of messages; let last = last; trackBy: trackByCreated">
            <ion-thumbnail slot="start">
                <img-loader src="{{msg.user?.thumbnail != null ? msg.user?.thumbnail : 'assets/person-icon.svg'}}"></img-loader>
            </ion-thumbnail>
            <ion-label text-wrap>
                <div style="color: gray; height: 30px;">
                    <div class="message-name">{{msg.user?.displayname}}</div>
                    <div class="message-date">{{getDateString(msg.messagedate)}}</div>
                </div>
                <p style="color: black;">{{msg.messagecontent}}</p>
            </ion-label>
        </ion-item>
    </ion-list>

这是getDateString您可以看到为每条消息调用的方法：

getDateString(date: number){
    this.logging("Inside get date string.");

    let d = new Date(date);
    let dn = Date.now();

    //If it's the same day, return just the time string
    if (Math.round(<any>dn/(1000*60*60*24)) == Math.round(<any>d/(1000*60*60*24)))
        return d.toLocaleTimeString('en-US');

    return d.toLocaleString('en-US');
}

按功能跟踪：

trackByCreated(i, msg) {
    return msg.messagedate;
}

这个问题是，Angular 似乎非常频繁地重绘消息列表，即使没有要显示的新消息（根据我登录页面代码的订阅者，可观察对象没有传输新数据。）。每次滚动页面、在输入中键入字符或单击页面上的任意位置时，它都会重绘。这是正常行为吗？对函数的不断调用getDateString正在破坏性能。

编辑：此外，在初始页面加载时，数据仅传输到页面一次，但列表会重绘 20 次。这是正常的行为吗？

您可以在下面看到所有呼叫的日志。红色代表输入，蓝色是滚动，绿色是点击屏幕。

标签： angularionic-frameworkionic4