データの大部分を反応させて描画する

Question

私は特定のカテゴリのニュースを表示するコンポーネントを構築しています。一部のページに100件の記事が含まれている場合があります。

私の現在のアプローチは、50個の記事の一部をダウンロードして<NewsListPortion>シンプル（ステートレス、renderのみ）のコンポーネント内にレンダリングすることです。しかし、それらの部分が積み重なっていくにつれて、既にロードされている部分を再描画します。そして、それはパフォーマンスヒットではない？ - 再レンダリングするたびにすべてを

[ 
    { 
    page: 1, 
    offset: 1, 
    data: [{ // 50 articles }] 
    }, 
    { 
    page: 2, 
    offset: 1, 
    data: [{ // 50 articles }] 
    } 
] 

だから、もう一度、私の懸念は、ここでのパフォーマンスは以下のとおりです。

render() { 
    if(this.state.loaded) { 
     return (
     <div className="news-list__wrapper"> 
      {this.data.map(p => { 
      const key = `${p.page}-${p.offset}`; 
      if (p.data.length > 0) { 
       return (
       <NewsListPortion key={key} page={p.page} offset={p.offset} data={p.data} /> 
      ) 
      } 
      })} 
      {this.state.progress ? 
      <img src={loader} alt="" /> 
      : 
      this.state.finished ? 
       <div><hr />koniec</div> 
       : 
       <button id="load-more-news" onClick={this.loadNews.bind(this)}>Wczytaj więcej</button> 
      } 
     </div> 
    ) 
    } else { 
     return (
     <img src={loader} alt="" /> 
    ) 
    } 
    } 

this.dataは、このようなオブジェクトからなる配列、次のとおりです。

私のコードは次のようになります新しいportfionが到着するのは悪い考えのようですが、私はこれを他の方法でやり遂げる方法は知らない。

Answer 1

もっと多くのニュース記事を提供しているだけでは、リアクションはすべてを再レンダリングしません。新しいデータ（ニュース部分）が来るたびに、反応して以前のすべてのキーを使用し、適切なニュース部分だけを追加して古いものに触れることはありません。 そのすべてが反応によって気になっていますが、パフォーマンスのために何か特別なことはありません。

あなたのキーをユニークにしてください。