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 }]
  }
]

所以，再次，我关注的是性能 - 每次新的portfion到达时重新渲染所有内容似乎都是一个坏主意，但我不知道如何以任何其他方式执行此操作。

Answer 1

当您提供更多新闻部分时，React不会重新呈现所有内容。你已经为你的新闻部分组件附加了一个键，每当新数据（newssportion）出现时，react将使用所有以前的键并且只添加适当的新闻部分并且反应不会触及oldones。它完全由反应照顾，你没有任何额外的性能。

只需让你的钥匙独一无二。

反应和渲染大部分数据

1 个答案: