时间戳

首页 > 解决方案 > 渲染大量组件实例时 React-select 导致加载缓慢

reactjs - 渲染大量组件实例时 React-select 导致加载缓慢

问题描述

我有一个应用程序，它本质上是一个表格视图，有许多行和列的选择输入，每个选择输入可以有 1000 个选项。表视图中的每一列是每个选择输入的同一组数据，每一行是数据库中的不同文档。当使用带有这么多选项的常规选择时，我们会遇到疯狂的延迟。所以我环顾四周，决定使用两个包的组合。

演示示例：https ://codesandbox.io/s/react-windowed-select-inside-react-window-dh24r?file=/index.js

我的计划是与 结合react-window，react-windowed-select但这也有非常糟糕的性能问题。延迟在初始渲染时尤其明显。（请注意单击React Select Rows按钮时的加载时间）。

在 React 中处理这类应用程序的最佳方式是什么？我目前认为可能有 2 个选项，但我确信还有很多其他选项。

  1. 找到一种使用现有的两个包来提高性能的方法。
  2. 编写一些更加自定义的内容，使用纯文本加载所有行，并且react-windowed-select每列隐藏一个组件。当用户单击将成为选择输入的内容时，我们将选择输入的列定位为就好像它位于单击的位置并打开它。

任何帮助或建议表示赞赏。

标签： reactjsperformancerenderreact-select

解决方案

推荐阅读