10

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

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

Grid -> Row -> Cell

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

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

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

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

4

4 回答 4

9

我会选择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>
        );
     }
} 
于 2017-02-10T13:16:07.227 回答
8

这次聚会有点晚了。但是React Virtualized对我来说非常好。

于 2018-07-07T22:08:35.597 回答
2

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

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

如果您正在寻找没有 3rd 方库的纯 JavaScript 实现,来自 facebook 团队的 Ben Alpert在 SO 上发布了这个小提琴/代码

于 2017-02-10T12:53:09.313 回答
1

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

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

于 2017-02-10T13:06:26.473 回答