Я знаю, что есть много вопросов по этой теме (Реагировать на бесконечную прокрутку), мой вопрос направлен на более глубокое изучение, чтобы определить лучшее доступное в настоящее время решение для реализации такого компонента.
Яработая над приложением чата, я создал компонент, похожий на окно чата Facebook Messenger, которое можно увидеть в браузерах настольных компьютеров.
Facebook:
Шахта (пока):
Получается реализация бесконечной прокрутки с бесконечной загрузкойбыть хитрым.С точки зрения UX, мне всегда нужно удовлетворять, по крайней мере, следующим свойствам:
- Высота каждого сообщения строки должна динамически вычисляться точно в срок, потому что я не знаю высоту сообщениязаранее, поскольку они не имеют фиксированной высоты;
- Каждый раз, когда пользователь вводит новое сообщение, прокрутка должна автоматически достигать нижней части прокручиваемого компонента до последнего только что отправленного сообщения.У прокручиваемого компонента есть верхний и нижний отступы (или я также могу использовать поле), чтобы оставить некоторое пространство между верхним и первым, нижним и последним сообщением чата (посмотрите на изображения выше);
- Чат находится внутри элемента popover, который открывается с постепенной анимацией, и он может быть закрыт и открыт пользователем, пока он использует страницу;
Теперь по порядкучтобы сделать это, я уже попробовал несколько библиотек:
- реакция-бесконечность : моя первая попытка была прекращена, потому что она должна знать высоты всех элементов заранее;
- реагирующий список : я нашел его действительно мощным, дело в том, что если я закрываю свой поповер и снова открываю его после того, как иногда он теряет некоторые уже обработанные сообщения, и мне кажется, что это может бытьошибка компонента
react-list.Кроме того, компонент не позволяет мне отображать нижнюю часть прокрутки вверх (см. https://github.com/coderiety/react-list/issues/50); - реагирует на виртуализацию : очень мощный, но я нашел, что сложно использовать
List сInfiniteLoader вместе с AutoSizer, CellMeasurer и CellMeasurerCache. Кроме того, при отправке сообщения, если я звоню List.scrollToIndex(lastIndex), чтобы автоматически прокрутить контейнер до дна, прокрутка не полностью достигает дна, так как прокручиваемыйКонтейнер имеет верхнее и нижнее заполнение. Я не смог достичь удовлетворительного результата с этим компонентом. - реагировать-бесконечно-любая-высота : я хотел бы попробовать, но в настоящее времякажется, что он еще не был перенесен в React 16, если я его установлю, NPM предупреждает меня о неудовлетворенной зависимости от однорангового React 15, но я использую React 16.
Так что мой вопрос большеспособ противостоять друг другу: кто-нибудь из вас когда-либо должен был реализовывать компонент чата React с 3 требованиями, которые я написал выше? Какую библиотеку вы использовали? Как Facebook Messenger справляется с этими они используют React, кто-нибудь из вас знает, как они реализовали такой компонент?Если я проверяю сообщения чата в окне чата Facebook, кажется, что оно хранит все уже обработанные сообщения в DOM.Но если это так, не может ли это повлиять на производительность?
Так что сейчас у меня больше вопросов, чем ответов.Я действительно хотел бы найти компонент, который соответствует моим потребностям.Другим вариантом было бы реализовать мой собственный.