0
특정 범주의 뉴스를 표시하는 구성 요소를 구축 중입니다. 일부 페이지는 100 개의 기사를 포함 할 수 있으며 약 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 도착 나쁜 생각처럼 보이지만, 나는 다른 방법으로 이것을 어떻게 해야할지 모르겠다.