reactjs - react : Don't render components in table who aren't visible

Question

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

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

网格 -> 行 -> 单元格

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

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

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

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

Answer 1

我会选择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>
        );
     }
}