反应虚拟化列表中项目内部的反应系绳的性能问题

Question

说明

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

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

1. 呈现了一个简单的列表，没有VirtualScroll。系留菜单呈现流畅，没有明显的卡顿。这就是我得出的结论，问题出在react-virtualized
2. 将我的rowRenderer 简化为只有菜单触发器，如recommended here。
3. 在行组件中实现shouldComponentUpdate。这大大提高了感知性能，大大减少了延迟，但仍然很明显。
4. 检查了 Chrome 开发工具的时间线。我看到Grid.js 和tether.js 都触发了回流。

库版本：

• react-virtualized v. 7.24.3（大型项目，尚未准备好升级到 8.x）
• react-tether v. 0.5.2
• 反应 v. 15.2.1

工作演示

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

截图：

Answer 1

仅供参考，Plnkr 已损坏。它包含了错误的样式版本（8.x 而不是 7.x）。

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

话虽如此，升级到版本 8 为您提供了门户方法的替代方法，该方法确实解决了问题，如更新后的 plunk 所示：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>
  );
}