React：テーブルに表示されていないコンポーネントをレンダリングしない

Question

テーブルが30行以上50カラム以上あります。各行と各セルは、それらを操作することができ、変化するデータに基づいて動作や外観を変更するため、特定のReactコンポーネントです。

だから私のコンポーネントhierachyは、次のようになります。

Grid -> Row -> Cell

私は、アプリケーションの状態を処理するためにMobXを使用していますが、それはいくつかの細胞成分に影響を与える状態の変化に来るときには、ビットを遅くするようです。すべてのセルと行がユーザーに見えるわけではないので（表はスクロール可能です）、実際に表示できるReactコンポーネントのみを実行するとパフォーマンスが向上する可能性があると私は考えました。

私は、既存のコンポーネントがあるかどうか、あるいはそのようなコンポーネントを効率的な方法で作成する方法には疑問がありました。

また、私はセルと行が状態が変わるたびに再レンダリングすることを認識しました。たぶんそれは、すべてのセルと行コンポーネントがappStoreを注入するという事実と関係しているかもしれません。変更されたコンポーネントだけを再レンダリングする必要があることをMobXにどのように伝えますか？それも可能ですか？

だから、基本的にどちらかの方法を探しています。

Answer 1

私はMobxやそれに関連するソリューションには慣れていませんが、目に見えるコンポーネントを表示するだけでコミュニティ内の「無限」コンポーネントという名前が使用されています。 "Infinite Scroll"や "Infinite List"を検索すると、いくつかのアイデアが得られます。

私が見つけた最高のライブラリはreact-infiniteです。基本的には、図書館は子供のコンポーネントを渡すHOCです。

第三者のライブラリを持たない純粋なJavaScriptの実装を探している場合は、FacebookのBen Alpertさんがthis fiddle/code on SOという投稿を投稿しました。

Answer 2

再レイアウトを防ぐために、ReactのshouldComponentUpdate（PureComponentがそのまま使用する）を行コンポーネントに使用できます。 <Row key={person.id} person={person} edit={this.edit}/>がある場合、SCUはpersonとedit小道具を比較し、同じ場合はその行を再レンダリングしません。したがって、行に追加すると、変更された行だけが再レンダリングされます。

この最適化はkey小道具が配列インデックスがある場合に阻止されるかedit関数がインライン関数である - edit={this.edit}はedit={() => this.edit(person.id}は毎回異なる基準を提示し、毎回同じ基準を提示します。

https://60devs.com/pure-component-in-react.html

https://mobx.js.org/best/react-performance.html

Answer 3

私はreact-visibility-sensorで行くと思います。

のような何か：

const VisibilitySensor = require('react-visibility-sensor'); 

class TableRow extends React.Component { 

    onChange(isVisible) { 
     this.setState({isVisible: isVisible}); 
    }; 

    render() { 
     const { isVisible } = this.state; 

     return (
      <VisibilitySensor onChange={onChange}> 
       {isVisible && {/* Table row content */}} 
      </VisibilitySensor> 
     ); 
    } 
}