材质 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在性能方面有几个缺点，并且你需要必须更改组件的默认行为，如果找不到问题，那么您始终可以渲染一些自定义组件。