如果没有行索引的概念来获取rowdata，如何使用React Virtualized？

Question

当没有行索引的概念来获取rowdata时，是否可以使用React Virtualized？

我想使用React Virtualized来显示来自大量（100k +行）数据库表的数据，该表经常被修改：在表中的随机位置添加/删除/更新行。

我没有可以通过使用行索引来获取行的函数，因为每行的位置每隔几秒就会发生变化。

该表已排序，每行都保证具有唯一的内容，因此我所拥有的是以下功能：

getFirst/LastRow() => data：获取（当前）第一行/最后一行的数据内容

getNext/PreviousRows(startData, nrRows) => data[]：获取（当前）下一个/上一个nrRows的数据内容，从内容为startData的行开始

findRow(data) => data：找到包含内容data的行

我还有一个实时跟踪表突变的观察器函数，因此我可以为表的每个插入/删除/更新操作获得一个回调。

有没有办法将这些可用功能映射到可行的React Virtualized配置？

Answer 1

当没有行索引的概念来获取rowdata时，是否可以使用React Virtualized？

将索引（或索引）映射到数据是反应虚拟化工作的核心。您需要构建/维护一些允许您有效访问索引数据的结构（即使该索引经常更改），以便从lib中受益。

当数据每隔几秒钟发生变化时，通常是将项目附加到远程集合的一端？或者它可能是诉诸，删除等？

您描述的链接列表样式API几乎似乎更适合使用分页控件。

Answer 2

我认为所谓的答案可能是“是”，如果语义为

使用React Virtualized

可以理解为RV是“拼图”的一部分。我认为这基本上很好，准确地说明了与RV本身相对的answer

没有行索引的概念

RV确实需要了解自己的行索引。但是如果实现了RV，并且只是在“父”的任何事件间隔（即分页）中传递数据......就可以使用RV了解它正在使用的父行索引

得到rowdata

您可以将您的分页应用视为父级。 dataGrid组件作为子组件。您的父React应用程序中的状态/渲染周期只需要在用户将根据您的数据“页面”找到直观的位置重新渲染dataGrid（以及它的滚动条）。

我一直在使用不同的“dataGrid”组件为类似的解决方案建模，并对此问题进行了各种思考。冒着[更多] tl; dr的风险，我目前的技术是这样的：

• 将一个总行数提供给dataGrid组件，因此它设置为好像我将在一个非分页镜头中给它整个api
• 仅提供当前可用数据页面中的数据（比如500条记录）
• dataGrid的onScroll事件为我交叉计算条件阈值（scrollTop等），表明列表已滚动到当前页面的顶行或底行，因为我的父应用程序理解它
• onScroll计算行和页面，获取新数据并设置新状态
• 新状态具有相同的巨大行数，但具有来自API调用的不同数据行
• 使用应该/确实更新React中的生命周期： “scrollTo”并将组件网格重新定位到我父母理解为右侧“页面”顶部的任何一行，并且 （警告......原型）我将我的分页数据数组与填充（cringe）连接起来，如[... Array（{＃ofRows *＃ofpages}）]。concat（newData），以便子组件离开拖动句柄用户期望在我渲染之前。最后，我希望通过调整列表中顶部或最底部div的高度来补偿预期的滚动条位置，但这是一个不断发展的工作。
• 我也可能在我自己的分页中发现了一个宏观问题，即窗口库通过过扫描行来解决。看来我必须在我的API调用中“过扫描”，以便在窗口组件自己的top / botom之外有一个缓冲区。最终，这可能会以更好的逻辑消失。手指交叉。

参考资料我发现有用：

使用该库进行讨论的更多历史记录是here。

此外，react-window-paginated看起来已经使用较新的react-window lib解决了您的评论描述的问题的基础知识。这个解决方案对我来说非常引人注目，因为我的代码设计可能最终会出现在最终的构图中。 RW虽然没有给你带RV的功能，但它很容易扩展，如果你不需要大量的RV功能，它可能更容易启动。

如果您要解决RV中的分页解决方案，this可能会激发原型，但它不能解决API分页或映射/线程问题本身。