React：不要渲染 table 中不可见的组件

Question

我有一个 table，其中有 >30 行和 >50 列。每行和每个单元格都是一个特定的 React 组件，因为您可以操纵它们并且它们会根据不断变化的数据改变行为和外观。

所以我的组件层次结构如下所示：

Grid -> Row -> Cell

我正在使用 MobX 来处理应用程序状态，当涉及到影响某些单元格组件的状态更改时，它似乎有点慢。由于并非每个单元格和行都对用户可见（table 是可滚动的），我认为只让实际可见的 React 组件可能是一种性能改进。

我想知道是否可能存在现有组件，或者我将如何以高效的方式创建这样的组件。

我还认识到，每次状态更改时，单元格和行都会重新呈现。也许这与每个单元格和行组件都注入 appStore 这一事实有关。我如何告诉 MobX 它应该只重新渲染那些更改的组件？这可能吗？

所以基本上我正在寻找任何一种方式。

Answer 1

我不熟悉 Mobx 或任何与之相关的解决方案，但仅显示可见组件在社区中已采用名称 "Infinite" 组件。所以搜索 "Infinite Scroll" 或 "Infinite List" 可能会给你一些想法。

我发现并喜欢使用的最好的库是 react-infinite。基本上，该库是您将子组件传递给的 HOC。

如果您正在寻找没有第 3 方库的纯 JavaScript 实现，Facebook 团队的 Ben Alpert 发布了 this fiddle/code on SO。

Answer 2

您可以在行组件上使用 React 的 shouldComponentUpdate（PureComponent 开箱即用）来防止重新呈现。如果你有 <Row key={person.id} person={person} edit={this.edit}/>，SCU 比较 person 和 edit 属性，如果它们相同，则阻止重新渲染该行。因此，当您追加到行时，只有更改的行会重新呈现。

如果 key prop 是数组索引或 edit 函数是内联函数，则此优化将受阻 - edit={this.edit} 每次都呈现相同的引用，edit={() => this.edit(person.id} 呈现一个每次参考不同。

https://60devs.com/pure-component-in-react.html

https://mobx.js.org/best/react-performance.html

Answer 3

我会选择 react-visibility-sensor。

类似于：

const VisibilitySensor = require('react-visibility-sensor');

class TableRow extends React.Component {
    onChange(isVisible) {
        this.setState({ isVisible });
    };

    render () {
        const { isVisible } = this.state;

        return (
            <VisibilitySensor onChange={onChange}>
                {isVisible && {/* Table row content */}}
            </VisibilitySensor>
        );
     }
}

Answer 4

这次聚会有点晚了。但是 React Virtualized 对我来说已经很好了。

React：不要渲染 table 中不可见的组件

React: Don't render components in table who aren't visible

reactjs

mobx

mobx-react