どのようにコンポーネントプールを行うには？

Question

リソースが限られているデバイスでは、コンポーネントプーリングによってパフォーマンスを活用するのが一般的です。たとえば、無限のスクロールリストがあります。ビューポートには常に約10個のコンポーネントが表示されるため、プールには20個のコンポーネントインスタンスしか存在できません。ユーザーが上下にスクロールすると、上部または下部のコンポーネントが反対側に切り替えられ、新しいデータで埋められます。このように、ユーザーはリストが長いと感じますが、コンポーネントインスタンスは20個しかありません。

jQueryと命令型プログラミングでは、このようなコンポーネントプーリングのトリックを実装するのは簡単です。しかし、React世界では、UIは宣言的です。

const List = ({listData}) => { 
    return <ul> 
    {listData.map(item => <li>{item}</li>); 
    </ul>; 
} 

コードは、表示される項目のリストがあることを宣言しています。私たちのコードには、コンポーネントプーリングを行うコントロールはありません。私はReact自身がDOMプールを作成すると信じています。

したがって、パフォーマンス向上のためにコンポーネントプーリングを実装する方法はありますか？

Answer 1

ライブラリReact-Virtualizedライブラリは、Reactアプリケーションで使用するための仮想リストの実装です。それはかなり大幅に最適化されています。私はそれが何をする必要があるかを達成するために、多くの参考文献とDOMのやりとりを使用すると思います。私は実際には（本当に、または他の場所）リアクトでプール仮想リストやコンポーネントを実装するためにを試したことがありませんが、私はが基本的な概念のための右のラインに沿っかもしれない何かを描くことができ、言っ

。

この例では、1000個のアイテムのリストがありますが、20個しか表示しません。まず、renderに適切なページ番号とウィンドウを作成します。たとえば、ユーザーが30個の項目をスクロールしたと仮定して、30〜50個の項目を表示したいとします。通常、Reactで項目のリストをレンダリングするときは、データのIDに基づいて、または代替インデックスとして配列の各項目にキーを割り当てます。

通常、配列のインデックスをキーとして使用するのは、内容を変更するとReactが要素が移動したと考えられるためです。 通常はのように、コンポーネントのマウントとアンマウントの代わりに、コンポーネントはマウントされたままですが、突然、別のセットのプロップを受け取ります。しかし、この場合、それは望ましい行動であるように見えます。

ので、完全にテストされていないと仮定のが、漠然と妥当なサンプルコード：言及、マーク用

render() { 
    const {items} = this.props; 
    const {displaySize, startIndex} = this.state; 

    const itemsToDisplay = items.slice(startIndex, startIndex + displaySize + 1); 

    const renderedItems = itemsToDisplay.map((item, index) => { 
     return <ListItem item={item} key={index} /> 
    }); 

    return (
     <div> 
      {renderedItems} 
     </div> 
    ); 
}