Material-UI-Tabelle Langsam

Question

So verwende ich Material-UI für eine große Datentabelle und erkannte, dass es wirklich langsam zu verwenden ist. Bevor ich in Github ein Problem verursache, möchte ich andere Benutzer des Frameworks fragen, ob es eine Arbeit gibt, um die Leistung zu steigern.

Dies ist der Code, den ich habe:

<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

Vielleicht möchten Sie den Code für jede unnötige überprüfen Anrufe und schlechte Praktiken machen, die sie verursachen können: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.dn0e5qhtw

Was die Leistung der Tabellen-Rendering selbst Ich hatte nie ein Problem, aber ich habe immer seitenweise Daten gerendert, wenn Sie versuchen, mehrere tausend Elemente zu rendern, könnte es Probleme verursachen, fand ich Material-ui mehrere Mängel in der Leistung und Fälle, wo Sie das Standardverhalten ändern müssen Wenn Sie ein Problem nicht finden können, können Sie immer einige davon rendern benutzerdefinierte Komponente.

Answer 2

Ich fand, dass seine fast unmöglich, Material-ui-Tabelle zu verwenden, wenn Sie über ~ 500 Zeilen haben, was ich in der Vergangenheit react-virtualized und Stil so die Zeilen verwenden getan haben, ist, dass es zu Material-ui ähnlich sieht.

React-virtualized gibt Ihnen auch die Möglichkeit, auf Zeilenklicks zu hören, damit Sie das Kontrollkästchen in der angeklickten Zeile deaktivieren und aktivieren können.