Javascript 已记忆的组件将重新渲染其子组件

我正在使用react 16.6和材质UI，我在尝试避免不必要的重新渲染时遇到了麻烦。我尝试了几乎所有我能想到的东西，材质ui的子组件在每次用户交互时都会重新呈现。属性是否完全相同并不重要，它们会被重新渲染

我尝试使用memo-froom-react，根组件得到了记忆，避免了不必要的重新渲染，但即使如此，我尝试过的所有react工具（react-dev-tools和为什么更新包）都会检测到子组件被重新渲染

下面是一个简单的片段：

import React, { PureComponent, memo } from 'react';

import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';

const rowText = ({ title, artist }) =>
  console.log('Row text render') || (
    <ListItemText primary={title} secondary={artist} />
  );

const RowText = memo(rowText);

const row = ({ selected, song, onSelect, favorite, LikeButton }) =>
  console.log('Row rendered') || (
    <ListItem
      button
      selected={selected === song.title}
      onClick={() => onSelect(song.title)}
    >
      {selected === song.title && <PlayArrowIcon color="primary" />}
      <RowText {...song} />
      <ListItemSecondaryAction>
        <LikeButton liked={favorite} title={song.title} />
      </ListItemSecondaryAction>
    </ListItem>
  );

row.displayName = 'Row';

const Row = memo(row);

即使这样，我也得到了可以避免的消息，即对组件的所有子级进行重新渲染

即使是最简单的组件（只有一个MUI组件）和一个根，在任何情况下都不要对我进行udpate，我也会得到不必要的重新渲染

class RowText extends Component {
  shouldComponentUpdate = (nextProps, nextState) => {
    return false;
  };

  render() {
    const { title, artist } = this.props;
    return <ListItemText primary={title} secondary={artist} />;
  }
}

class行文本扩展组件{
shouldComponentUpdate=（nextProps，nextState）=>{
返回false；
};
render（）{
const{title，artist}=this.props；
返回；
}
}

这一定是材质ui上的某种错误

编辑

---

这种情况只发生在ListItem组件及其子组件上，因此它们上一定存在某种缺陷。我对其他组件尝试了相同的技术，如果不应该，则不会重新渲染子组件。

是否更改传递到列表中的数据

ListItem

被包装在一个更高阶的组件中，以从列表祖先访问上下文，它可能在代码之外得到强制更新。此时，我认为最好包含整个代码。我不会把任何东西传递给列表。这有点奇怪，因为当另一个组件上的微调器运行时，该组件的状态仍在重新渲染，因此材质组件应该在某种程度上是连接的。也许是通过各种方式？你找到解决办法了吗？我遇到了同样的问题，现在有两个不同的MUI组件…我只是停止尝试，对不起。但我认为这与上下文提供者有关，上下文提供者直接进入MUI组件，绕过父级。

class RowText extends Component {
  shouldComponentUpdate = (nextProps, nextState) => {
    return false;
  };

  render() {
    const { title, artist } = this.props;
    return <ListItemText primary={title} secondary={artist} />;
  }
}