パフォーマンスの問題

Question

説明

私が反応し、仮想化VirtualScrollでレンダリング項目の潜在的に長いリストを持っています。
リストの各項目（行）にはかなりの量の要素があり、そのうちの1つはコンテキストメニューを開きます。私は、のメニューをレンダリングするためにreact-tetherを使用しようとしています（項目がスクロール可能なリストの一番下にあるときに非表示にならないようにします）。そして、ユーザがスクロールしている間、リスト。
私の問題は、つながれたメニューの位置を更新する際に顕著な遅れがあることです。

私がこれまでに撮影したいくつかのステップ

：単純なリストレンダリング

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
• が反応し、V。15.2.1

ワーキングデモ

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

スクリーンショット：Plnkrが壊れていたことをFYI

Answer 1

。間違ったスタイルのバージョン（7.xの代わりに8.x）が含まれていました。

これを修正した後、私が見る視覚的な「遅れ」は、私がバージョン7.xで修正する方法を知っているものではありません。問題は、ブラウザが別のスレッドでスクロールを管理しているため（つまり、JSがJSをブロックしてUIが応答しなくなるのを防ぐためです）通常は、すべてのUIが一緒にスクロールされているため、これは目立つことはありませんが、この場合、モーダルはJSによって絶対的に配置されるため、ブラウザーのスクロール位置より遅れることがあります。

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

： https://plnkr.co/edit/NESPMzDz22JjwFVthve4?p=preview

彼らキーはこれです：この更新plunkのように言われていること

は、バージョン8へのアップグレードは、あなたに問題が解決しないポータルアプローチの代替を与えます