Блог

У меня есть приложение Ionic 4 Angular со страницей чата. Он отображает до 50 сообщений чата и имеет вход для отправки сообщения.

Список сообщений извлекается из Firestore Google и передается в приложение в качестве наблюдаемого. Вот как я отображаю сообщения.

 <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 раз. Это нормальное поведение?

Ниже вы можете увидеть журнал всех вызовов. Красный цвет обозначает ввод ввода, синий — прокрутку, а зеленый — просто нажатие на экран.