我需要在 React (Next.js) 中有效地渲染一个 6000 记录的 Excel 或 html 文件

Question

TLDR：有没有人知道一种可行的方法来处理从 excel 文件或从不会减慢我的网站速度的预先存在的 HTML 文件中呈现一页上的 6000 条记录？

我为一个有很多部门的客户建立了一个记录保存系统。 所有其他部门都在使用我为他们设置的 React CRUD 系统来全面跟踪和管理数据库。

我在一个特定部门有一个人，他曾经使用一个 HTML 文件来填充网站，该 HTML 文件是在他们的机器上从一个 excel 文件本地生成的。 他们在迁移到我构建的系统时不会以任何方式或形式让步，并坚持要我给他们一种上传 HTML 文件或 Excel 文件以在网站上显示数据的方法，并且他们希望在本地管理信息，他们自己。 此外，他们希望将所有 6000 条记录放在一个页面上，并且也不会让步，将任何类型的分页扔出窗口（我之前已经内置）。

除了使用 Sheet.js (xlsx) 将 excel 文件转换为 JSON，然后将其映射到如下所示的 HTML 表之外，我对此并没有任何疑虑。 它只是一个简单的映射，就像 React 中的任何其他映射一样：

<thead className="bg-gray-50">
                  <tr>
                    {libraryColumns.map((column) => (
                      <th
                        className="px-10 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
                        key={column}
                      >
                        {column}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {books.map((book, index) => (
                    <TableRow book={book} key={index} index={index} />
                  ))}
                </tbody>
              </table>

这是有效的，但是它使网站的这一部分变得非常缓慢。

所以我有两个选择，我可以通过从服务器读取 excel 文件、转换为 JSON 并映射到该表来继续使用数据填充页面的这条路径，或者我可以呈现客户端能够的 HTML 文件从他们的excel文件生成。 在后者的情况下，我想要自定义样式，但我不确定这是否可能。 如果不可能，我不会嫁给它，因为在这一点上我只需要完成它并完成它。

我的问题最终是这样的最佳实践是什么？

不幸的是，我被要求做客户想要的事情并且不能修改要求，我只是不确定如何有效地完成这项工作，如果可能的话。

谢谢你。

Answer 1

您需要添加无限滚动的功能（当用户滚动您按需加载数据时），或者您也可以使用 react-window 库，我有自定义无限滚动的工作代码，您可以在此处查看我的仓库https://github。 com/amansadhwani/all-features-react/tree/master/src/components/InfiniteScroll