Question

我正在使用chart.js实时显示backend的价格变化。 Backend更改为frontend后会发送新价格。 priceData（数组）保存在mobx priceChartStore中。价格更改后，我必须更新chart。我使用ref标签的canvas值绘制价格图表。

问题是，除非我在componentDidUpdate函数中调用了priceData值，否则不会调用render函数，即使该函数未在其中使用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中。

Answer 1

这是mobx的反应方式（与react-mobx)

将组件类或独立的渲染函数转换为反应组件，该组件跟踪渲染使用的可观察对象，并在这些值之一发生更改时自动重新渲染组件。

因此mobx仅跟踪variables函数中使用的render，并在它们更改时引起重新渲染。

作为mobx存储的Rerender组件已更新

1 个答案: