Реакция и рендеринг больших частей данных

Question

Я создаю компонент, который отображает новости из определенной категории. Некоторые страницы могут содержать 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 }] 
    } 
] 

Итак, опять же, мое беспокойство здесь производительность - повторное оказание все каждый раз, когда появление нового портфолио кажется плохой идеей, но я понятия не имею, как это сделать другим способом.

Answer 1

Реагировать не переделывать все, если вы просто поставляете больше новостей. Вы уже привязали ключ к компоненту вашей новостной части, всякий раз, когда появляются новые данные (newssportion), они будут использовать все предыдущие ключи и добавлять только соответствующую новость и реагировать не будут касаться старых. Все, что вам нужно, реагировать, вам не нужно ничего лишнего для производительности.

Просто сделайте свой ключ уникальным.