Реагировать: не отображать в таблице компоненты, которые не видны

У меня есть таблица с> 30 строками и> 50 столбцами. Каждая строка и каждая ячейка - это определенный компонент React, поскольку вы можете управлять ими, и они изменяют поведение и внешний вид в зависимости от изменения данных.

Итак, моя иерархия компонентов выглядит так:

Grid -> Row -> Cell

Я использую MobX для обработки состояния приложения, и кажется, что он немного замедляется, когда дело доходит до изменений состояния, влияющих на некоторые компоненты ячеек. Поскольку не каждая ячейка и строка видны пользователю (таблица прокручивается), я подумал, что, возможно, для улучшения производительности будет разрешено отображать только те компоненты React, которые действительно видны.

Мне было интересно, может ли быть существующий компонент, или как я подхожу к созданию такого компонента эффективным способом.

Также я узнал, что ячейки и строки перерисовываются каждый раз при изменении состояния. Возможно, это как-то связано с тем фактом, что каждая ячейка и компонент строки внедряют appStore. Как мне сказать MobX, что он должен повторно визуализировать только те измененные компоненты? Это вообще возможно?

Так что в основном я ищу любой путь.


reactjs mobx mobx-react
person Johannes Klauß    schedule 10.02.2017    source источник

Ответы (4)


arrow_upward
8
arrow_downward

Немного поздно на эту вечеринку. Но React Virtualized мне очень понравился.

person mccambridge    schedule 07.07.2018

arrow_upward
9
arrow_downward

Я бы выбрал 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>
        );
     }
}
person Daniel    schedule 10.02.2017

arrow_upward
2
arrow_downward

Я не знаком с Mobx или какими-либо решениями, связанными с этим, но только отображение видимых компонентов в сообществе получило название "бесконечные" компоненты. Так что поиск «Бесконечный свиток» или «Бесконечный список» может дать вам некоторые идеи.

Лучшая библиотека, которую я нашел и с удовольствием использую, - это react-infinite. По сути, библиотека - это HOC, в который вы передаете дочерние компоненты.

Если вы ищете реализацию исключительно на JavaScript без сторонних библиотек, Бен Альперт из команды facebook опубликовал эту скрипку / код на SO .

person erik-sn    schedule 10.02.2017

arrow_upward
1
arrow_downward

Вы можете использовать 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} каждый раз представляет другую ссылку.

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

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

person Jesvin Jose    schedule 10.02.2017