材料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>

- Keren Chandran

---

我知道这篇帖子已经超过1.5年了，但你尝试过不使用工具提示表格吗？最近我遇到了一些可怕的性能问题，经过艰苦的故障排除，我发现它们都与使用Material UI的工具提示有关。一旦我将其删除，一切都非常顺畅。 - Adam Nathaniel Davis

Answer 1

您可能需要检查您的代码是否存在不必要的渲染调用和可能导致这些问题的不良实践： https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f 至于表格渲染本身的性能，我从未遇到过问题，但我总是渲染分页数据。如果您尝试渲染几千个项目，则可能会导致问题。我发现material-ui在性能方面存在几个缺点，并且在您需要更改组件的默认行为的情况下。如果您找不到问题，那么您可以始终渲染一些自定义组件。

- Oscar Franco

---

这个答案很好，但我想补充一下，对于任何使用React Hooks的人，也要记得使用React的useCallback钩子。不这样做可能会导致这样一种情况：当您更改组件状态时，您的事件函数（例如复选框单击）可能会被重新定义，这可能会导致整个表格重绘，即使只更改了一行。 - user1307657

Answer 2

我发现当你有超过约500行时，几乎不可能使用Material-UI表格。以前我所做的是使用react-virtualized并样式化行，使其看起来类似于Material-UI。

React-virtualized还可以让你监听行点击事件，因此你可以利用它来禁用或启用点击行上的复选框。

- Davi DeBarros

---

你好，你是否遇到过这样的问题：当你使用react-virtualized表格时，如果有很多列，那么y轴滚动条会移动到最右边？似乎与溢出有关..不确定如何解决！任何帮助都将是惊人的。 - Greg A