LitElement render () не вызывается при быстрых обновлениях состояния - PullRequest
0 голосов
/ 01 марта 2019

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

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 итераций, который отправляет действие в redux для обновления числа, хранящегося в network.prediction.Однако число, отображаемое в элементах, обновляется только один раз после последнего изменения состояния.Так как я хочу, чтобы это был живой номер, я хочу, чтобы каждое изменение было записано.Самое странное, что второе console.log() выполняется для каждого изменения, однако, рендеринг вызывается только один раз.

Данные поступают из процесса обучения tfjs.Я хочу обновлять прогноз каждый раз, когда была сделана новая итерация:

import * as tf from '@tensorflow/tfjs';
import * as d from './data';
import * as m from './model';

import { store } from '../store.js';
import { newPrediction } from '../actions/network.js';

export class Training {
  model: m.Model;
  data: d.Data;
  iterations: number;

  constructor(model: m.Model, data: d.Data) {
    this.model = model;
    this.model.model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
    this.data = data;
    this.iterations = 0;
  }

  start() {
    var this_ = this;
    if (this.iterations < 1000) {
      this.iterate();
    }
  }

  iterate() {
    this.iterations++;
    tf.tidy(() => {
      const prediction = this.model.model.predict(tf.tensor2d([5], [1, 1]) as tf.Tensor) as tf.Tensor<tf.Rank>;
      store.dispatch(newPrediction(prediction));
      this.model.model.trainOnBatch(this.data.xs, this.data.ys);
    });
  }
}

1 Ответ

0 голосов
/ 18 марта 2019

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...