如何在reactjs中加速大数据？

Question

我正在尝试获取数百万个数据并显示数据表。现在，我正在尝试检查静态数据，而不是从database获取数据。

class UL extends React.Compontent {
  state = {
    data: [],
  };

  getPublicationApcWaiverConfigListData = () => {
   let data = [];

    for (let i = 0; i <= 100000; i++) {
      data.push({
        id: i,
        publisher_name: "item.publisher_name",
        publication_name: "item.publication_name",
      });
    }
    this.setState({
      data: data,
    });
  };


  render() {
    let heading = ["publication_name", "content_type", "expiry_date"];


    return (
      <div

      >
        <div className="row filter-md-4">
          <div className="col-12">
              {this.state.data && (
                <DataTable
                  heading={heading}
                  data={this.state.data}
                />
              )}
            </div>
        </div>
      </div>
    );
  }
}

问题是，当我尝试显示数据表中的数据列表时，组件速度非常慢。

如何快速获取数据列表？

Answer 1

我认为最好的解决方案是将数据分成一些较小的部分，例如每次迭代100次迭代和1000次推入。首先，只需加载前1000个项目，并使用传感器，然后在到达div末尾时发送下一个请求。

import Sensor from 'react-visibility-sensor'

function MyComponent (props) {
  state = {
    data: [],
  };

let index = 0

getPublicationApcWaiverConfigListData = (isVisible) => {
   let data = this.state.data
   if (!isVisible) return;

    for (let i = index; i <= index + 1000; i++) {
      data.push({
        id: i,
        publisher_name: "item.publisher_name",
        publication_name: "item.publication_name",
      });
    }
    this.setState({
      data: data,
    });
  };

  return (
      <div className="row filter-md-4">
          <div className="col-12">
              {this.state.data && (
                <DataTable
                  heading={heading}
                  data={this.state.data}
                />
               <Sensor onChange={this.getPublicationApcWaiverConfigListData} />
              )}
            </div>
        </div>
  );
}