我有一个包含> 30行和> 50列的表。每一行和每个单元格都是一个特定的React组件，因为您可以操纵它们，它们会根据更改的数据更改行为和外观。
所以我的组件层次结构如下所示：
Grid -> Row -> Cell
我正在使用MobX来处理应用程序状态，当涉及影响某些单元组件的状态更改时，它似乎会慢一点。由于并非每个单元格和行都对用户可见（表格是可滚动的），我认为仅仅让实际可见的React组件可能是性能改进。
我想知道是否可能存在现有组件或我如何以高效的方式创建这样的组件。
我也认识到每次状态改变时细胞和行都会重新渲染。也许它与事实有关，每个单元格和行组件都会注入appStore。我如何告诉MobX它应该只重新渲染那些已更改的组件？这甚至可能吗？
所以基本上我正在寻找任何一种方式。
我不熟悉Mobx或与此相关的任何解决方案，但只显示可见组件已在社区中使用“无限”组件的名称。所以搜索“无限滚动”或“无限列表”可能会给你一些想法。
我找到并喜欢使用的最好的图书馆是react-infinite。基本上，库是您传递子组件的HOC。
如果您正在寻找没有第三方库的纯JavaScript实现，来自facebook团队的Ben Alpert发布了this fiddle/code on SO。
我和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>
);
}
}
这次聚会有点晚了。但是React Virtualized对我来说非常好。
您可以在行组件上使用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}每次都提供不同的引用。