재질 UI 표가 느림

Question

대용량 데이터 표에 Material-UI를 사용하고있어 사용하는 것이 느리다는 것을 깨달았습니다. Github에서 문제를 만들기 전에 성능 향상을위한 해결 방법이 있으면 다른 사용자에게 프레임 워크를 요청했습니다.

이

내가 가진 그 코드 :

<Table 
    height='500' 
    fixedHeader 
    selectable 
    multiSelectable 
    > 
     <TableHeader 
     displaySelectAll 
     adjustForCheckbox 
     enableSelectAll 
     > 
     <TableRow> 
      <TableHeaderColumn tooltip="Status">Status</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Name">Name</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Email">Email</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Phone No.">Phone No.</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Company">Company</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Skills">Skills</TableHeaderColumn> 
     </TableRow> 
     </TableHeader> 
     <TableBody 
     displayRowCheckbox 
     > 
     {filteredApplicants.map((applicant, index) => (
      <TableRow key={index} selected={applicant.selected}> 
      <TableRowColumn><Status status={applicant.status} updateStatus={updateApplicantStatus}/></TableRowColumn> 
      <TableRowColumn>{applicant.name}</TableRowColumn> 
      <TableRowColumn>{applicant.email}</TableRowColumn> 
      <TableRowColumn>{applicant.phone}</TableRowColumn> 
      <TableRowColumn>{applicant.company}</TableRowColumn> 
      <TableRowColumn><Skills skills={applicant.skills}/></TableRowColumn> 
      </TableRow> 
     ))} 
     </TableBody> 
    </Table> 

Answer 1

당신은 어떤 필요에 대한 귀하의 코드를 확인을 일으킬 수 있습니다 전화와 나쁜 관행 렌더링 할 수 있습니다 :의 성능에 관해서는 https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.dn0e5qhtw

을 테이블 자체의 렌더링 자체가 문제는 아니지만 항상 페이징 된 데이터를 렌더링했습니다. 문제가 발생할 수있는 수천 개의 항목을 렌더링하려고하면 material-ui에 기본 동작을 변경해야하는 몇 가지 단점이있는 것으로 나타났습니다. 구성 요소 중 문제가 발견되지 않으면 항상 일부를 렌더링 할 수 있습니다. 맞춤 구성 요소.

Answer 2

당신이 ~ 500 행 이상일 때 material-ui 테이블을 사용하는 것이 거의 불가능하다는 것을 알게되었습니다. 제가 과거에 한 일은 react-virtualized 을 사용하고 material-ui와 비슷하게 보이도록 스타일을 사용합니다.

React-virtualized를 사용하면 행 클릭 수를들을 수 있기 때문에이를 사용하여 클릭 한 행의 확인란을 사용하거나 사용하지 않도록 설정할 수 있습니다.