反应：不要渲染表中不可见的组件

我有一个具有> 30行和> 50列的表。每行和每个单元格都是特定的React组件，因为您可以操纵它们，它们会根据更改的数据更改行为并进行查看。反应：不要渲染表中不可见的组件

所以我的组件层次结构是这样的：

Grid -> Row -> Cell

我使用MobX来处理应用程序的状态，它似乎有点慢，当它涉及到的是影响一些电池组件的状态变化。由于不是每个单元格和行都对用户可见（表格可滚动），我认为这可能是性能改进，只让React组件实际可见。

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

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

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

来源

2017-02-10 Johannes Klauß

我不熟悉Mobx或与此相关的任何解决方案，但只显示可见组件在社区中采用了“无限”组件名称。所以搜索“无限滚动”或“无限列表”可能会给你一些想法。

我找到并享受的最好的图书馆是react-infinite。基本上，图书馆是一个HOC，你传递了儿童组件。

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

来源

2017-02-10 12:53:09

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

这种优化将受挫如果key丙是数组索引或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

来源

2017-02-10 13:06:26 aitchnyu

我会用react-visibility-sensor去。

喜欢的东西：

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

class TableRow extends React.Component { 

    onChange(isVisible) { 
     this.setState({isVisible: isVisible}); 
    }; 

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

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

来源

2017-02-10 13:16:07 Daniel

反应：不要渲染表中不可见的组件

回答

相关问题