时间戳

首页 > 解决方案 > 获取大数据以在 Datatable 上呈现 - ReactJS

javascript - 获取大数据以在 Datatable 上呈现 - ReactJS

问题描述

我的数据库中有一个包含 20,000 行的列表，我正在将它们提取到我的表中。我将这 20,000 行存储到 localStorage 以提高速度。我的问题是，当我导航到页面（包含 20,000 行）时，它会在页面加载之前滞后几秒钟。

如何让我的页面呈现并等待获取大量数据？

PS getItem function fetches the data and store in array items and stored to localStorage.setItem('my_items')：。

索引.js

 state: {
     items:[],
     loading:true;
   }

componentDidMount()
{       

let items = JSON.parse(localStorage.getItem('my_items'));

if(items)
    {
      this.setState({
      items: items
    })      
     this.setState({ loading: false });
    }
    else
    {
        this.getItems();
    }
}





  return (

{loading &&
           <div className="d-flex justify-content-center loader-overlay">
              <CircularProgress />
           </div>
        }

       <MuiThemeProvider theme={this.getMuiTheme()}>

                <MUIDataTable

                    title={
                    }
                    data={this.state.items.map(item => {
                        return [
                           item.name,
                           item.type
                        ]

                     })}
                    columns={columns}
                    options={options}
                        />
            </MuiThemeProvider>   
        );

标签： javascriptreactjs

解决方案

这个问题通常通过使用服务器端分页来解决。它应该像这样工作：

  1. 打开带有数据表的页面，然后获取前 20 个项目（或任何大小的页面）。你发/api/tableData?offset=0&limit=20。这只会返回前 20 个项目。

  2. 用户点击下一页，您使用/api/tableData?offset=20&limit=20. 这将返回 id 为 21-40 的项目。

  3. 用户点击下一页，您使用获取第三页/api/tableData?offset=20&limit=20

如果您使用的是mui-datatablesNPM 包，它有选项serverSide，它可以帮助您轻松完成。Remote DataMUI 数据表包https://www.npmjs.com/package/mui-datatables#remote-data文档中的Chjeck部分。

但是，如果您确定自己的用例并且不想进行服务器端分页，则可以使用Web Worker. 您的应用程序中的问题是，JSON.parse对于如此庞大的集合需要太长时间。使用Web Worker，您可以启动另一个不会阻塞 UI 线程的线程。在工作线程中，您将开始解析集合，完成解析后，您会将数据发送回 UI 线程。Web worker 正是为这个用例而设计的。您可以在此处了解更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

推荐阅读