Question

我正在使用react-plotly生成大量的数据时间线（10,000-100,000点），并在另一个窗口中对数据进行动画处理。我需要得到一个带有反应属性表示时间的洗涤器（垂直线），但我需要更新洗涤器而不更新剩余的时间线，因为这样做需要很长时间。我怎样才能让垂直线更新？

编辑：被问到代码

在以下代码中，backtracks和thresholds对象为Uint32Array s并表示跟踪的y轴，其中x轴为Uint32Array s backtracksTime和thresholdsTime。我想要得到的是x坐标currentTime的垂直线。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Plotly from 'plotly.js';
import Plot from 'react-plotly.js';

import styles from './style.scss';

export default class ThresholdWindow extends Component {
  static propTypes = {
    name: PropTypes.string,
    backtracks: PropTypes.object,
    backtracksTime: PropTypes.object,
    thresholds: PropTypes.object,
    thresholdsTime: PropTypes.object,
    currentTime: PropTypes.number,
  }

  constructor(props) {
    super(props);
    this.state = {
      plotRevision: 0,
      width: 0,
      height: 0,
    };
  }

  componentDidMount() {
    const resizeObserver = new ResizeObserver(entries => {
      const oldPlotRevision = this.state.plotRevision;
      const rect = entries[0].contentRect;
      this.setState({
        plotRevision: oldPlotRevision + 1,
        height: rect.height,
        width: rect.width,
      });
    });
    resizeObserver.observe(this.container);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.plotRevision !== nextState.plotRevision) {
      return true;
    } else if (this.props.currentTime !== nextProps.currentTime) {
      return true;
    }
    return false;
  }

  render() {
    const data = [
      {
        name: 'Threshold',
        type: 'scattergl',
        mode: 'lines',
        x: this.props.thresholdsTime,
        y: this.props.thresholds,
        side: 'above',
      },
      {
        name: 'Backtracks',
        type: 'scattergl',
        mode: 'lines',
        x: this.props.backtracksTime,
        y: this.props.backtracks,
      },
      {
        name: 'Current Time',
        type: 'scattergl',
        mode: 'lines',
        x: [this.props.currentTime, this.props.currentTime],
        y: [0, 1],
        yaxis: 'y2',
      },
    ];

    return (
      <div className={styles['threshold-window']} ref={(el) => { this.container = el; }}>
        <Plot
          divId={`backtracks-${this.props.name}`}
          className={styles['threshold-graph']}
          ref={(el) => { this.plot = el; }}
          layout={{
            width: this.state.width,
            height: this.state.height,
            yaxis: {
              fixedrange: true,
            },
            yaxis2: {
              side: 'right',
              range: [0, 1],
            },
            margin: {
              l: 35,
              r: 15,
              b: 20,
              t: 15,
            },
            legend: {
              orientation: 'h',
              y: 1,
            },
          }}
          revision={this.state.plotRevision}
          data={data}
        />
      </div>
    );
  }
}

Edit2：我实际上并没有在任何地方看到currentTime行，所以我非常确定某处有错误。

Answer 1

使用react-plotly.js，性能应该是不错的，因为它只会重绘它需要的内容。你能分享一些不合适的例子或代码吗？

如何只更新反应中的一条痕迹？

1 个答案: