React는 어떻게 빅데이터 양의 목록을 렌더링합니까?

우리는 데이터 전시 목록에 따라 이런 수요를 자주 만날 수 있다.이런 코드는 네가 이미 수백 수천 번을 훑어보았을 것이다.
그러나 만약 당신이 수천 수만 개의 데이터를 동시에 전시해야 한다면, 브라우저가 끊기고, 프레임을 잃어버리고, 심지어는 끊기는 문제를 초래할 것이다.
본고는react-virtualized를 이용하여 빅데이터 양의 목록을 효율적으로 렌더링하는 것을 소개할 것이다.

시작합시다!

우선 React 애플리케이션 생성

create-react-app virtualization

적용은 다음과 같은 1000개의 의견을 표시합니다.
타사 라이브러리 lorem-ipsum을 도입하여 아날로그 데이터를 생성합니다.

cd virtualization

npm install --save lorem-ipsum

src/App.js에 lorem-ipsum 도입:

import loremIpsum from 'lorem-ipsum';

다음은 1000개의 데이터 배열입니다.

const rowCount = 1000;

class App extends Component {
  constructor() {
    super();
    this.list = Array(rowCount).fill().map((val, idx) => {
      return {
        id: idx, 
        name: 'John Doe',
        image: 'http://via.placeholder.com/40',
        text: loremIpsum({
          count: 1, 
          units: 'sentences',
          sentenceLowerBound: 4,
          sentenceUpperBound: 8 
        })
      }
    });
  }
  //...
}

각 데이터는 id, , , 4~8 으로 구성됩니다.render()에서 이 그룹을 사용합니다.

render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to Reacth1>
      header>
      <div className="list">
        {this.list.map(this.renderRow.bind(this))}
      div>
    div>
  );
}

renderRow()을 추가하여 열을 만듭니다.

renderRow(item) {
  return (
    <div key={item.id} className="row">
      <div className="image">
        <img src={item.image} alt="" />
      div>
      <div className="content">
        <div>{item.name}div>
        <div>{item.text}div>
      div>
    div>
  );
}

src/App.css에 스타일 추가:

.list {
  padding: 10px;
}

.row { 
  border-bottom: 1px solid #ebeced;
  text-align: left;
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.image {
  margin-right: 10px;
}

.content {
  padding: 10px;
}

자, 시작 프로젝트 yarn start은 다음과 같은 화면을 볼 수 있습니다.
요소를 살펴보면 DOM에 div이 많이 마운트되어 있습니다.

저희가 성능을 측정해 보도록 하겠습니다.

만약 당신이 크롬을 사용한다면, 몇 걸음으로 성능을 빠르게 테스트할 수 있습니다.

개발자 도구 열기

Command+Shift+P(Mac) or Control+Shift+P(Windows, Linux)를 눌러 명령 메뉴

열기

입력 render 드롭다운 상자에서 Show Rendering 을 선택합니다.

클릭render쪽, FPS Meter앞체크.

스크롤 목록

우리는 스크롤 바가 굴러갈 때 프레임 속도가 60에서 38 정도로 떨어지는 것을 볼 수 있다.1000개의 데이터만 있는 상황인데 데이터를 더 늘리면 브라우저가 끊기고 심지어 끊긴다.
이어서 리얼리티-virtualized가 어떻게 성능을 향상시켰는지 살펴볼까요?

react-virtualized 원리

핵심 원리: 네가 본 것만 과장한다.
위의 앱은 1000개의 댓글을 덧붙였지만, 화면에는 10여 개의 데이터만 보여 주었고, 나머지 990개의 댓글은 낭비였다.
만약 우리가 보이는 평론만 과장한다면, 마우스를 굴려서 더 많은 것을 볼 때, 새로운 노드를 낡은 노드로 바꿉니다.이렇게 하면 성능 병목의 문제를 완벽하게 해결할 수 있다.

어떻게 쓰지?

먼저 src/App.js에 List 구성 요소를 도입합니다.

import { List } from "react-virtualized";

기존 코드 render() 교체:

  {this.list.map(this.renderRow.bind(this))}

List 구성 요소 사용

const listHeight = 600;

const rowHeight = 50;

const rowWidth = 800;

//...

"list">

  <List

    width={rowWidth}

    height={listHeight}

    rowHeight={rowHeight}

    rowRenderer={this.renderRow.bind(this)}

    rowCount={this.list.length} />

div>
 
   
   renderRow()：
 
   
renderRow({ index, key, style }) {
  return (
    <div key={key} style={style} className="row">
      <div className="image">
        <img src={this.list[index].image} alt="" />
      div>
      <div className="content">
        <div>{this.list[index].name}div>
        <div>{this.list[index].text}div>
      div>
    div>
  );
}
  
애플리케이션 시작 yarn start:
요소를 보려면 다음과 같이 하십시오.
보이는 요소만 렌더링된 것을 볼 수 있습니다.
성능은 어떤가요?
  
위의 동일한 방법으로 테스트:
기본적으로 60프레임 정도 유지되는 것을 볼 수 있다.성능(^ ^)
이상은react-virtualized의 간단한 응용일 뿐입니다. 관심이 있으면 한번 해 보세요!
읽어주셔서 감사합니다!
  
Esteban Herrera의 Rendering large lists with React Virtualized