javascript - 每次使用 React 和 material-ui 选择一行时，所有 TableRows 都会重新呈现

Question

我有这样的代码片段

<Table selectable onRowSelection={this.onRecordSelected} bodyStyle={tableBodyStyle}>
        <TableBody deselectOnClickaway={false} showRowHover displayRowCheckbox={false}>
          {this.props.taskRecords.map((row, index) => (
            <TableRow key={row.get('id')} selected={this.state.selectedRecordRowId === index}>
              <TableRowColumn>{row.getIn(['task', 'name'])}</TableRowColumn>
              <TableRowColumn>{row.getIn(['task', 'description'])}</TableRowColumn>
              <TableRowColumn>{row.get('status')}</TableRowColumn>
              <TableRowColumn>{row.get('log')}</TableRowColumn>
            </TableRow>
          ))}
        </TableBody>
</Table>

我查看了TableRow和TableRowColumn的源码，发现它们没有实现shouldComponentUpdate方法。我知道当任何状态改变时它们都会被重新渲染。

我尝试使用 recompose 库中的 pure 函数将它们纯化为组件。

const TableRow = pure(require('material-ui/lib/table/table-row'));
const TableRowColumn = pure(require('material-ui/lib/table/table-row-column'));

它们仍然被重新渲染

在我的理解中，如果给定的 props 没有改变，净化后的组件将不会再被重新渲染。在这种情况下，所有 Prop 都是来自 Immutable.js 的不可变对象(immutable对象)或函数。

有什么方法可以防止它在我选择任何行时重新呈现吗？

提前谢谢你。

Answer 1

终于找到了解决办法。

<Table selectable onRowSelection={this.onRecordSelected} bodyStyle={tableBodyStyle}>
        <TableBody deselectOnClickaway={false} showRowHover displayRowCheckbox={false}>
          {this.props.taskRecords.map((row, index) => (
            <PureRecordRow key={row.get('id')} selected={this.state.selectedRecordRowId === index}>
              <TableRowColumn>{row.getIn(['task', 'name'])}</TableRowColumn>
              <TableRowColumn>{row.getIn(['task', 'description'])}</TableRowColumn>
              <TableRowColumn>{row.get('status')}</TableRowColumn>
              <TableRowColumn>{row.get('log')}</TableRowColumn>
            </PureRecordRow>
          ))}
        </TableBody>
 </Table>

我创建了一个新组件 PureRecordRow，它使用自定义 shouldComponentUpdate 方法扩展了 TableRow:

class PureRecordRow extends TableRow{
  constructor(props, context){
    super(props, context)
  }
  shouldComponentUpdate(nextProps, nextState) {
    return this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected;
  }
}