性能問題，在一個反應​​虛擬化列表

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> 
); 
}