Компонент рендеринга при обновлении хранилища mobx - PullRequest
Новая
       9

Компонент рендеринга при обновлении хранилища mobx

0 голосов
/ 27 июня 2019

Я использую chart.js, чтобы показать изменения цены от backend в реальном времени.Backend отправляет новую цену, когда она изменяется на frontend.priceData (массив) сохраняется в mobx priceChartStore.Я должен обновить chart, как цена изменилась.Я использую ref значение тега canvas для рисования графика цен.

Проблема в том, что функция componentDidUpdate не вызывается, пока я не вызову это значение priceData в *Функция 1017 *, даже если она не используется в функции render.

Она работает: 

componentDidUpdate() {
  const { priceChartStore: { priceData } = this.props;
...
// update chart
  this.chart = new LineChart({
      el: this.el,
      priceData,
      config: {
      liveMode: true,
      startTime,
      endTime,
      maxDataLength: MAX_PRICES_LENGTH,
      },
  });
...
}
// render function
render() {
    const {
        priceChartStore: { priceData }, // never used in render function
    } = this.props;
    return (
        <ChartCanvasWrapper>
            <canvas ref={el => (this.el = el)} />
        </ChartCanvasWrapper>
    );
}

она не работает:


// render function
render() {
    // const {
    //     priceChartStore: { priceData }, // never used in render function
    // } = this.props;
    return (
        <ChartCanvasWrapper>
            <canvas ref={el => (this.el = el)} />
        </ChartCanvasWrapper>
    );
}

Так работает mobx или это моя ошибка?

Примечание: я уверен, что в priceChartStore нет ошибок или проблем, и я делаю эток этому component.

1 Ответ

1 голос
/ 28 июня 2019

Это способ, которым mobx работает в реакции (с act-mobx)

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

Так что mobx будет отслеживать только variables, использованный в render функция и вызывает повторный рендеринг при их изменении.

...