React-Table在选择时重新渲染整个表

Question

我有一个相对标准的react-table，其中的行可以通过HOC SelectTable进行选择，就像示例表所提供的一样：

https://github.com/tannerlinsley/react-table/blob/v6/docs/src/examples/selecttable/index.js

作为我的专栏之一的主要区别是自定义组件：

 const columns = [
      {
      ...other columns...
      {
        Header: "Sound file",
        accessor: "sound_file",
        Cell: props => {
          return <SoundFilePlayer url={props.row.sound_file_url} />;
        },

        minWidth: 80
      }
    ];

SoundFilePlayer组件是react-player组件，播放作为道具传递到该组件的声音文件。本质上，它将加载传入的URL并呈现声音播放器：

在加载网址之前（持续时间默认为0:00）

然后在加载后以正确的持续时间进行渲染：

我面临的问题是，每当在我的表中选择一行时，整个表都会重新呈现（如果没有声音播放器就可以了）-意味着声音文件播放器将重置为0:00持续时间，然后以正确的持续时间再次重新加载。每行都会发生这种情况。

我的猜测是，将检查所有行键，以查看它们是否当前处于选中状态，从而导致整个表的重新呈现。

无论如何，我是否只重新渲染选定的行-而不是整个表？我看过https://reactjs.org/docs/state-and-lifecycle.html 以及其他一些SO帖子，但似乎不能仅重新渲染受影响的行。甚至只是使用复选框重新渲染该列？

Answer 1

所以我最终找到了一个解决方案-只需将我的表的版本降级，特别是将其降级为6.8.6即可解决此问题。

似乎在以后的版本中引入了一个错误（鉴于现在关注的是版本7，我怀疑它会被修复）。

Answer 2

您可以尝试使用useMemo钩子来记住组件

const file = React.useMemo(() => <SoundFilePlayer url={props.row.sound_file_url} />, [props.row.sound_file_url]);

除非文件url更改，否则它将不会重新创建组件功能并将从内存中获取它。