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

Question

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

Так мой компонент иерархия выглядит следующим образом:

Grid -> Row -> Cell

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

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

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

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

Answer 1

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

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

Если вы ищете чисто реализацию JavaScript без сторонних библиотек, Ben Alpert из команды facebook отправил this fiddle/code on SO.

Answer 2

Вы можете использовать React's mustComponentUpdate (PureComponent реализует его из коробки) на вашем компоненте строки, чтобы предотвратить повторную передачу. Если у вас есть <Row key={person.id} person={person} edit={this.edit}/>, SCU сравнивает person и edit реквизита, и если они одинаковы, предотвращает повторную передачу этой строки. Поэтому, когда вы добавляете к строкам, только измененные ряды rerender.

Эта оптимизация будет сорвана, если 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

Answer 3

Я бы с 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> 
     ); 
    } 
}