性能问题，在一个反应​​虚拟化列表

Question

说明

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

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

1. 渲染一个简单的列表，无需VirtualScroll。系绳菜单顺利进行，没有明显的麻烦。这就是我如何得出结论，问题是react-virtualized
2. 简化我的rowRenderer下降到只有菜单触发器，为recommended here。
3. 在行组件中实现了shouldComponentUpdate。这极大地提高了感知性能，大大减少了延迟，但仍然引人注目。
4. 检查Chrome devtools的时间表。我看到由Grid.js和tether.js触发的回流。

库版本：

• 反应虚拟化v 7.24.3（大项目，没有准备好让一步又8.X）
• 反应系绳v 0.5。 0.2
• 反应诉15.2.1

工作演示

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

截图：

Answer 1

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

修复后，我看到的视觉“滞后”不是我知道如何解决与版本7.x.问题在于浏览器在不同的线程中管理滚动（所以JS不会阻止它并导致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> 
); 
}