React:不要在表格中呈现不可见的组件

时间:2017-02-10 12:44:08

标签: reactjs mobx mobx-react

我有一个包含> 30行和> 50列的表格。每一行和每个单元格都是一个特定的React组件,因为您可以操纵它们,它们会根据更改的数据更改行为和外观。

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

Grid -> Row -> Cell

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

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

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

所以基本上我都在找两种方式。

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:3)

参加这个聚会有点晚了。但是React Virtualized对我来说很好。

答案 2 :(得分:2)

我不熟悉Mobx或与此相关的任何解决方案,但仅显示可见组件的名称&#34; Infinite&#34;社区中的组件。所以搜索&#34; Infinite Scroll&#34;或者&#34;无限列表&#34;可能会给你一些想法。

我找到并喜欢使用的最好的图书馆是react-infinite。基本上,库是一个HOC,您可以将子组件传递给它。

如果您正在寻找没有第三方库的纯JavaScript实现,来自facebook团队的Ben Alpert发布​​了this fiddle/code on SO

答案 3 :(得分:1)

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

如果key prop是数组索引或edit函数是内联函数 - edit={this.edit}每次都提供相同的引用,{@ 1}}会提供不同的引用,则会阻止此优化每一次。

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

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