反应并绘制数据的大部分

我建立从某个类别显示新闻的成分。一些页面可能包含100篇文章，大约100多篇文章。反应并绘制数据的大部分

我目前的做法是下载50篇文章的一部分，并将其呈现在<NewsListPortion>简单（无状态，仅包含render）组件。但是，当这些部分保持堆叠时，我会重新渲染已经加载的部分。这不是一个表现如何？

我的代码看起来如下：

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是由对象的数组，像这样：

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

所以，再一次，我关心这里是性能 - 重新渲染，每次都一个新的portfion似乎是一个坏主意，但我不知道如何以任何其他方式做到这一点。

来源

2016-07-22 Tomek Buszewski

阵营不rerendeing的一切，当你只是提供更多的newsportions。你已经为你的新闻部分组件添加了一个键，每当新数据（newssportion）出现时，反应将使用所有以前的键，只添加适当的新闻部分并作出反应而不会触碰老人。它的所有照顾的反应，你没有任何额外的表现。

只是让你关键是独一无二的。

来源

2016-07-22 07:52:26

反应并绘制数据的大部分

回答

相关问题