0

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

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

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

表格是排序的，保证每一行都有唯一的内容，所以我有以下功能：

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

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

findRow(data) => data: 找到有内容的行data

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

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

4

2 回答 2

0

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

不。将索引（或索引）映射到数据是 react-virtualized 工作方式的核心。您需要构建/维护一些结构，使您能够有效地访问索引处的数据（即使该索引经常更改），以便从 lib.xml 中受益。

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

您描述的链表样式 API 几乎看起来更像是与分页控件一起使用。

于 2017-02-18T16:15:49.607 回答
0

我认为所问的答案可能是“是”，如果

使用 React 虚拟化

可以理解为 RV 是“一块拼图”。我认为这基本上说得非常好和准确，而 RV 本身具有相反的答案

没有行索引的概念

RV 确实需要了解它自己的行索引。但是，如果实现了 RV，并且简单地以任何事件间隔（即分页）从“父级”传递数据……则可以使用 RV，而无需了解正在使用的父级行索引

获取行数据

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

我一直在用不同的“dataGrid”组件建模一个类似的解决方案，并在这个问题上关注各种不同的想法。冒着[更多] tl; dr的风险，我目前的技术是这样的：

  • 将总行数提供给 dataGrid 组件，因此它的设置就像我要在一个未分页的镜头中给它整个 api
  • 仅提供当前可用数据页面中的数据（例如 500 条记录）
  • dataGrid 的 onScroll 事件计算我要跨越的条件阈值（scrollTop 等），指示列表已滚动到当前页面的顶行或底行，因为我的父应用程序理解它
  • onScroll 计算行和页，获取新数据，设置新状态
  • 新状态具有相同的巨大行数，但来自 API 调用的不同数据行

  • 在 React 中使用应该/确实更新生命周期：

    1. “scrollTo”并将组件网格重新定位到我父母理解为右“页面”顶部的任何行，以及
    2. （警告...原型）我将分页数据数组与 [...Array({#ofRows*#ofpages})].concat(newData) 之类的填充（畏缩）连接起来，以便子组件将拖动句柄留在哪里用户期望在我渲染之前。最终，我希望这将通过调整列表中顶部或底部 div 的高度来补偿预期的滚动条位置来完成，但这是一项优先级不断发展的工作。

  • 我也可能在我自己的分页中发现了相同问题的宏观世界，窗口库通过过度扫描行解决了这些问题。看来我必须在我的 API 调用中“过度扫描”，以便在窗口组件自己的顶部/底部之外有一个缓冲区。这最终可能会随着更好的逻辑而消失。手指交叉。

我发现有帮助的参考资料：

更多关于使用这个库的讨论历史在这里。

此外，react-window-paginated看起来已经解决了您的评论使用较新的react-window库描述的问题的基础。这个解决方案对我来说非常有吸引力，因为它是我最终组合中可能出现的代码设计。不过，RW 不会给您留下 RV 的功能集，但它很容易扩展，如果您不需要大量的 RV 功能，它可能更容易从这里开始。

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

于 2019-04-26T20:05:29.317 回答