reactjs에서 요소를 분리하는 방법은 무엇입니까?

Question

내가 1M 항목을 포함하는 배열, 렌더링의 성능을 표시하기 위해 노력하고 속도가 느립니다 :

class Scroll extends Component { 
    render() { 
     let display = this.props.names.map 
     (
      (name) => (
       <div> {name}</div> 
      ) 
     ) 

     return (
      <div id='container'> 
       <div className="scroll"> 
        {display} 
       </div> 
      </div> 
     ); 
    } 
} 

여기에 성능 문제를 해결하기 위해 노력하고 내가 생각하는 사용자에게 표시되지 않는 구성 요소를 마운트 해제했다. 성능 문제에 접근하는 가장 좋은 방법은 무엇입니까? 이 모듈/lib를 가져 오려고하지 않고 '스크래치'에서 빌드하십시오.

Answer 1

서버 측 페이지 매김 데이터 테이블 접근 방식을 사용하는 것이 좋습니다. 인간이 1M 데이터를 처리하는 것은 효과가 없습니다. 왜냐하면 인간은 그 양의 데이터를 처리 할 수 ​​없기 때문입니다. Fixed Data Table 2 또는 React Table