React-window: Изменения в версии 2

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

Спасибо, что поделились примером использования @istarkov. Дело не в том, что я не думаю, что существуют какие-либо допустимые варианты использования горизонтальных окон. Я просто думаю, что они встречаются гораздо реже. (Даже в случае каруселей многие используют навигацию со стрелками влево / вправо, которая не требует "прокрутки" окон на основе событий.) Я думаю, что это может быть лучшим способом (для меня) отказаться от поддержки v2, чтобы компенсировать некоторые сложности, которую я планирую реализовать с помощью предварительного рендеринга, динамического определения размеров и т. д.

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

Отлично. Но меня мало беспокоит удаление списка переменного размера. Вы планируете заменить список переменного размера на DynamicList, но проблема с динамическим списком, который вы не можете прокрутить до элемента, может быть довольно полезной функцией для некоторых компонентов, и такое требование может возникнуть со временем, поэтому вы не можете предсказать, если Окно реакции соответствует вашим потребностям.
Вторая проблема, которую я вижу, - это производительность динамического списка. Если вы можете обеспечить такую ​​же производительность для динамического списка, что и для списка переменного размера, можно отказаться от него, даже если вы не поддерживаете scrollToItem, но в противном случае разработчики могут быть заблокированы. странные ситуации, когда динамический список работает медленно и не поддерживает прокрутку до элементов, список имеет только фиксированную высоту элементов.

Вы планируете заменить список переменного размера на DynamicList, но проблема с динамическим списком, который вы не можете прокрутить до элемента

Я не думаю, что это внутреннее ограничение, просто одно из текущих реализаций. У меня есть идеи, как я могу предложить эту функцию. Нахожу ли я время, чтобы взяться за это - другой вопрос: smile:

Вторая проблема, которую я вижу, - это производительность динамического списка. Если вы можете обеспечить такую ​​же производительность для динамического списка, что и для списка переменного размера, можно отказаться от него, даже если вы не поддерживаете scrollToItem, но в противном случае разработчики могут быть заблокированы. странные ситуации, когда динамический список работает медленно и не поддерживает прокрутку до элементов, список имеет только фиксированную высоту элементов.

Сложно сказать, будет ли он работать. Похоже, что динамический список должен будет сделать больше, поэтому, вероятно, он не будет работать так же хорошо. Может разница будет существенная, а может и нет. Я хочу иметь возможность поддерживать некоторые вещи, которых у меня нет в настоящее время, и я думаю, что мне нужно сократить объем, чтобы добавить новые функции. Если вы в настоящее время довольны списком переменных, нет причин переходить на v2 (по крайней мере, в ближайшее время).

@bvaughn Мне кажется, это документация!
Вы работали над этим с прошлого лета? ;-)

На более серьезном ноте - я думаю, что рендеринг реквизита имеет смысл в этом контексте, хотя я не фанат.

Нет, я написал это сегодня утром Я устал.

Я думаю, что рендеринг реквизита имеет смысл в этом контексте, хотя я не фанат.

Можете объяснить, почему вы не фанат?

Может ли поддержка горизонтального списка / сетки иметь смысл в качестве дополнительной функции, например AutoSizer (react-virtualized-auto-sizer)?

Я использовал как react-virtualized, так и response-window для горизонтальных списков, и считаю, что API-интерфейс response-window намного проще. Хотя я определенно понимаю необходимость отказа от поддержки в надежде на более простой API.

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

@bvaughn Мне вообще нравится рендеринг реквизита, и они решат проблемы, которые вы обозначили, но я думаю, что они поощряют встроенную функцию, которая может содержать или не содержать кучу вложенной логики. 🤔 Любая ошибка здесь ложится на пользователя. 🙂

можно ли реализовать кладочную сетку?

@nikitapilgrim Нет. Я бы посоветовал просто использовать компонент Masonry из react-virtualized

https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md

спасибо, но его работа только с react-virtualized?

@nikitapilgrim Ага . 👍
React-virtualized поддерживает множество функций, которых нет в response-window.

Объем окна реакции резко сокращен, чтобы сосредоточиться на том, чтобы сделать пакет меньше и быстрее . 😉

Если вам нужны функции от react-virtualized, я предлагаю вам придерживаться этого - это по-прежнему отличная библиотека!

Я наткнулся на react-window потому что искал решение этой react-virtualized babel 7 проблемы . Я использую компоненты react-virtualized Masonry но после обновления babel больше не могу.

Здесь не место сообщать о проблемах с react-virtualized.

Согласен @bvaughn. Однако вы и @babangsund ответили на @nikitapilgrim выше, что компонент Masonry не будет добавлен в react-window а вместо этого будет использоваться react-virtualized . Однако, если пользователь использует последние [email protected] и [email protected] (например, create-react-app ), react-virtualized не обязательно будет работать.

Я полагаю, что это полезная информация для всех, кто попадет в ту же кроличью нору.
¯ \ _ (ツ) _ / ¯

эй, я хочу использовать список динамического размера, где я могу загрузить версию 2, или мне придется использовать React Virtualise?

так выглядит мой список со списком переменного размера

Это не общая проблема поддержки. Оставляйте комментарии по теме.

Обратная связь приветствуется

Я использую react-window в продукте, похожем на трелло, и вот некоторые мысли:

Рендеринг реквизита

Это кажется хорошим изменением из-за простоты и позволяет избежать упомянутого недостатка. Кроме того, api будет больше похож на FlatList от react-native. Я помню, как читал обсуждение на https://github.com/bvaughn/react-window/issues/85.

Меньше компонентов
Больше нет поддержки горизонтального списка

Я решительно голосую против удаления horizontal поддержки и VariableSizeList . Как вы понимаете, это два основных, которые я использую. Неужели их реализация слишком обременительна для поддержания? Если нет, я надеюсь, вы сможете их пересмотреть и оставить себе.

У меня нет твердого мнения по поводу других изменений. Удаление overscanCount меня немного беспокоит, но я еще не сталкивался со случаями использования, когда требовалось настраиваемое значение, так что, вероятно, это нормально.

Привет @bvaughn! Спасибо за этот пакет! Я собираюсь включить версию 2 в свой проект на работе. Вы не знаете, когда это может быть выпущено?

Спасибо за эту библиотеку и за то, что поделитесь своим планом на будущее, это очень полезно, чтобы помочь нам уменьшить технический долг.

Есть ли «простой» способ добиться поведения WindowScroller с использованием недавней версии react-window и более поздних версий 2?

Если это невозможно, будет ли это за пределами этой версии 2? или это можно будет добавить позже?

Мой контекст заключается в том, что мой макет включает нижний колонтитул, и при использовании современного подхода, такого как DynamicSizeList будет введена вторая полоса прокрутки (одна для страницы и одна для списка продуктов)

Отличный пакет. С нетерпением жду динамических списков высот по умолчанию - на данный момент я написал кучу настраиваемой логики для передачи отображаемых высот строк обратно в родительский список. Надеюсь, с этой новой версией я смогу устранить эту логику. Спасибо за вашу работу!

@ltkn @mrdanimal

Уже есть способ использовать скроллер окна:
https://github.com/bvaughn/react-window/issues/30#issuecomment -428868071

Как сделать бесконечную прокрутку в обоих направлениях, влево или вправо !!!

Если у нас есть WindowScroller без зависимости от react-virtualized , это будет здорово. Поскольку цель react-window сделала его более эффективным и меньшим количеством кода по сравнению с react-virtualized Итак, я не хочу использовать WindowScroller из react-virtualized . Вместо этого ищите отдельный пакет, например react-virtualized-auto-sizer .

Заранее спасибо.

@prabusamvel хм ..
В чем преимущество отдельного пакета?

Играл с новым DynamicSizeList. Очень круто! Я думаю, что отличным улучшением было бы включение в тип направления «ttb» и «btt» (сверху вниз, снизу вверх). В настоящее время нет чистого способа реализовать список, который прокручивается вверх, но все другие направления поддерживаются.

@toddmacintyre Я не могу найти эту версию 2.

@muhammedmagdi npm install react-window@next

Было бы замечательно, если бы версия 2 могла поддерживать структуры DOM, требуемые здесь спецификацией - https://www.w3.org/TR/wai-aria-1.1/#grid, поскольку № 217 все еще остается для нас проблемой. Насколько я могу судить, ваше предложение по версии 2 прямо сейчас - нет.

@mjurkowski @bvaughn yarn add react-window@next устанавливает 1.6.0-alpha.1 . Также при попытке запустить пример песочницы динамического списка https://react-window-next.now.sh/#/examples/list/dynamic -size выдает Error importing GitHub repository: Could not find package.json

Как насчет того, чтобы передать index в сетку - пока она есть? :)

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

Удаление горизонтальных списков помешает нам создать этот пользовательский интерфейс (или, по крайней мере, нам придется переписать его, чтобы использовать 2 сетки, где сетка заголовка столбца имеет одну строку.

Следующий товар выглядит потрясающе. Но мне нужны как горизонтальные, так и вертикальные, поэтому, к вашему сведению, я создал свой собственный: https://www.npmjs.com/package/react-infinite-grid-scroller. Использует макет сетки, перехватчики реакции, IntersectionObserver и requestIdleCallback.

Обратная связь приветствуется.

У меня такое чувство, что поддержка липких элементов была бы отличным дополнением к response-window. Это довольно распространенный вариант использования, который легко реализовать как для списков, так и для сеток.

API может выглядеть так:

<Grid
    // First 2 columns are sticky
    stickyLeft={2}
    // Last column is not sticky (default value)
    stickyRight={0}
    // First and last rows are sticky
    stickyTop={1}
    stickyBottom={1}
/>

Двумя ключевыми элементами, заставляющими работать липкость, являются:

1. отключайте только те ячейки, которые являются залипшими, если они находятся вне окна на оси, они не залипают
2. используйте position: sticky вместо absolute и используйте margin-x вместо left и top для оси, которая не является липкой

Стоимость такой замечательной функции кажется разумной:

• Площадь основания минимальна
• Никакого существенного влияния на производительность (просто отрисовка нескольких дополнительных строк / столбцов)
• Поддержка браузеров отличная, а те, которые не поддерживают position: sticky видят обычную версию.

Если вы считаете, что этот вариант использования слишком специфичен для поддержки как есть, отличным компромиссом будет поддержка только пункта 1. Возможность указать, следует ли отображать ячейку, позволит легко реализовать закрепление.

Буду рад помочь при необходимости.

не поддерживает автоматическое измерение и обновление их размеров.

Я чувствую, что это довольно большой недостаток. Почти для каждой сетки, которую я написал, мне нужно иметь 3 или 4 столбца с фиксированной шириной (для метки состояния, некоторых метаданных, призывов к действию и т. Д.) И 1 столбец с динамической шириной, который занимает остальное доступное пространство.

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

было бы хорошо, если бы эти варианты использования были хорошо продуманы, а решения задокументированы для тех, кому нужен динамический столбец.

Полностью понят - но практически говоря, это потребует больших усилий , и эта библиотека была произведением любви (а не оплачиваемым усилием). К сожалению, у меня даже не было времени закончить мои ограниченные попытки v2, не говоря уже о чем-то более агрессивном. 😞

было бы хорошо, если бы эти варианты использования были хорошо продуманы, а решения задокументированы для тех, кому нужен динамический столбец.

Полностью понят - но практически говоря, это потребует больших усилий , и эта библиотека была произведением любви (а не оплачиваемым усилием). К сожалению, у меня даже не было времени закончить мои попытки _scoped down_ v2, не говоря уже о чем-то более агрессивном. 😞

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

Было бы неплохо, но по моему опыту такого никогда не бывает: smile:

Мне не удалось использовать WindowScroller с DynamicSizedList, вероятно, из-за своевременного рендеринга, из-за которого scrollTo не работал очень хорошо. Будет ли это возможно в новой версии?

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

Привет @bvaughn ,
Я создал обсуждение на своей вилке с некоторыми случайными заметками.
Сообщите мне, если что-то не должно быть в списке или это неверно. Я дополню список, когда добьюсь прогресса.

Похоже на хорошие вещи