Полимерный рендер не вызывается при быстрых обновлениях

Question

У меня проблема с обновлением визуальных элементов на полимерной странице. Мой элемент выглядит следующим образом:

import { html, LitElement, property } from 'lit-element';
import { connect } from 'pwa-helpers/connect-mixin.js';

// These are the shared styles needed by this element.
import { SharedStyles } from '../../styles/shared-styles.js';

// This element is connected to the Redux store.
import { store, RootState } from '../../store.js';

class TFJSItem extends connect(store)(LitElement) {
  @property({type: Number})
  private _prediction = 0;

  static styles = SharedStyles;

  protected render() {
    console.log(this._prediction);
    return html`
      <section>
        <h2>TFJS</h2>
        <p>${this._prediction}</p>
      </section>
    `;
  }

  // This is called every time something is updated in the store.
  stateChanged(state: RootState) {
    console.log(state.network!.prediction);
    this._prediction = state.network!.prediction;
  }
}

window.customElements.define('tfjs-item', TFJSItem);

У меня есть скрипт, работающий на 1000 итераций, который отправляет действие на приставку для обновления числа, хранящегося в network.prediction, Однако число, отображаемое в элементах, обновляется только один раз после последнего изменения состояния. Так как я хочу, чтобы это был живой номер, я хочу, чтобы каждое изменение было записано. Странная вещь в том, что второй console.log() выполняется для каждого изменения, однако рендер вызывается только один раз.

Answer 1

LitElement группирует звонки на render()(фактически весь конвейер обновления). Ожидается, что если вы много обновите состояние в одной задаче, будет только один вызовrender().

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