反应虚拟化列表中项目内的react-tether的性能问题

Question

描述

我有一个可能很长的项目列表，这些项目是在反应虚拟化VirtualScroll中呈现的 列表中的每个项目（行）都有相当多的元素，其中一个元素打开上下文菜单。我尝试使用react-tether在HTML body上呈现该菜单（这样当项目位于可滚动列表的底部/顶部时，它就不会被隐藏）保持菜单“卡住”＃39;当用户滚动列表时，我的项目 我的问题是更新系留菜单的位置有明显的滞后。

到目前为止我采取的一些步骤：

1. 渲染了一个简单的列表，没有VirtualScroll。系绳菜单呈现顺畅，没有明显的凹陷。这就是我如何得出问题的原因是react-virtualized
2. 将rowRenderer简化为菜单触发器，简化为recommended here。
3. 在行组件中实现了shouldComponentUpdate。这大大提高了感知性能，大大减少了延迟，但仍然很明显。
4. 检查过Chrome devtools＆＃39;时间线。我看到Grid.js和tether.js触发了回流。

库版本：

• react-virtualized v.7.24.3（大项目，尚未准备好进入8.x步骤）
• react-tether v.5.5.2
• react v.15.2.1

工作演示

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

截图：

Answer 1

FYI，Plnkr被打破了。它包括错误的样式版本（8.x而不是7.x）。

在修复之后，我看到的视觉“滞后”并不是我知道如何修复版本7.x.问题是浏览器在不同的线程中管理滚动（因此JS不会阻止它并导致UI感觉无响应）。通常情况下这并不明显，因为所有的UI都在一起滚动，但是在这种情况下 - 你的模态绝对是由JS定位的，所以它有时会落后于浏览器的滚动位置。

话虽如此，升级到版本8为您提供了门户方法的替代方案， 解决了问题，如此更新的插件所示：https://plnkr.co/edit/NESPMzDz22JjwFVthve4?p=preview

他们的关键是：

render() {
  const { menuOpen } = this.state;
  const { index, style } = this.props;

  // Make sure open cells are on a higher z-index than others
  if (menuOpen) {
    style.zIndex = 2;
  }

  return (
    <div
      className="row"
      style={style}
    >
      {list[index]}

      {/* Render your button OR menu item here */}
    </div>
  );
}