Как улучшить рендеринг старших карт в React? - PullRequest
Новая
       5

Как улучшить рендеринг старших карт в React?

1 голос
/ 06 марта 2020

Я пытаюсь использовать Solid измерительные диаграммы в моем приложении React. Я отображаю таблицу с использованием пакета реагирующей таблицы. Это работает без каких-либо проблем. Я могу добавить диаграмму solid в качестве строки данных. Когда я сортирую столбец таблицы, требуется время, чтобы отсортировать таблицу с помощью диаграммы solid. Сортировка происходит по целочисленным значениям от 0 до 100. Результаты приведены ниже:

Информация о таблице:

  • без строк - может отличаться в зависимости от данных
  • количество столбцов - 5 (1 столбец для заголовка, 4 столбца для solid измерительная диаграмма)
  • анимация - выкл.
  • тип диаграммы - 360 градусов (полный круг)

Нет записей: время сортировки

  • 3: <1 секунд </li>
  • 10: 2-3 секунды
  • 60: 10-12 секунд

Как мне сократить время сортировки? Нужно ли использовать модуль повышения из старших графиков?

Код: 

class SolidGaugeCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      componentDom: "",
      redirect: false
    };
  }
  render() {
    const options = {
      chart: {
        type: "solidgauge",
        backgroundColor: "#212121",
        height: 1 * 70 + "%"
      },
      tooltip: {
        enabled: false,
        backgroundColor: '#ffffff',
        shared: true,
        useHTML: true,
        headerFormat: '<small>{point.key}</small><table>',
        pointFormat: 
          '<tr><td style="color: {series.color}">           {this.props.tooltipTitle} </td>' +
            '<td style="text-align: center"><b>{point.y} %</b></td></tr>',
        footerFormat: '</table>',
        valueDecimals: 2
        },
      title: {
        text: this.props.title,
        style: {
          color: "#fff",
          backgroundColor: "#282828"
        }
      },
      pane: {
        center: ["50%", "50%"],
        size: "100%",
        startAngle: 0,
        endAngle: 360,
        background: {
          innerRadius: "80%",
          outerRadius: "100%",
          shape: "arc"
        }
      },
      yAxis: {
        stops: [
          [0.0, "#FF0000"], 
          [0.64, "#FF0000"], 
          [0.65, "#FFFF00"], 
          [0.79, "#FFFF00"], 
          [0.80, "#32CD32"], 
          [0.99, "#32CD32"]
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 400,
        tickWidth: 0,
        title: {
          y: -70
        },
        labels: {
          enabled: false,
          y: 10
        },
        min: 0,
        max: 100
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        solidgauge: {
          innerRadius: "80%",
          dataLabels: {
            y: -20,
            color: "#fff",
            borderWidth: 0,
            useHTML: true,
            format:
              '<div style="text-align:center">' +
              '<span style="font-size:20px">{y}%</span><br/>' +
              "</div>"
          }
        }
      },
      series: [
        {
          animation: false,
          data: [this.props.data]
        }
      ]
    };
    return (
      <div>
        {/* {this.props.data} */}
        <HighchartsReact highcharts={Highcharts} options={options} />
      </div>
    );
  }
}

Я вызываю этот компонент внутри таблицы реакции.

Пример сценария,

Я хочу отобразить 50 строк. Каждый ряд имеет 4 solid калибровочных графика. В общей сложности компонент SolidGaugeCard будет смонтирован 50x4 = 200 раз для визуализации всей таблицы. Проблема в том, что таблица обрабатывается только после того, как все строки вызвали компонент SolidGaugeCard.

Есть ли способ динамического рендеринга строк? Я имею в виду, как только 1-й ряд вызовет компонент SolidGaugeCard 4 раза, выполните рендеринг этой строки. И продолжайте следить за остальной частью таблицы. Таким образом, не будет никакого мертвого времени на экране.

...