ReactJS: моделирование двунаправленной бесконечной прокрутки

Наше приложение использует бесконечную прокрутку для навигации по большим спискам разнородных предметов. Есть несколько морщин:

Для наших пользователей характерно иметь список из 10 000 наименований, и им необходимо пролистать 3k +.Это богатые элементы, поэтому у нас может быть всего несколько сотен в DOM, прежде чем производительность браузера станет неприемлемой.Предметы разной высоты.Элементы могут содержать изображения, и мы позволяем пользователю перейти к определенной дате. Это сложно, потому что пользователь может перейти к точке в списке, где нам нужно загрузить изображения над областью просмотра, что будет толкать содержимое вниз при загрузке. Неспособность обработать это означает, что пользователь может перейти к дате, но затем будет перенесен на более раннюю дату.

Известные, неполные решения:

https://github.com/guillaumervls/react-infinite-scroll - это просто простой компонент «больше нагрузки, когда мы дойдем до дна». Он не отбрасывает DOM, поэтому умрет на тысячах предметов.

http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - Показывает, как сохранить и восстановить положение прокрутки при вставке сверхуили же вставка внизу, но не оба вместе.

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

Ответы на вопрос(3)

Ваш ответ на вопрос