0

描述

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

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

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

库版本：

  • react-virtualized v. 7.24.3（大型项目，尚未准备好迈向 8.x 的步骤）
  • 反应系绳 v. 0.5.2
  • 反应 v. 15.2.1

工作演示

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

截屏：

截屏

4

1 回答 1

0

仅供参考，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>
  );
}
于 2016-10-28T19:20:17.030 回答