реагировать-гладко, вызывая зависание всей страницы

Я установил следующую конфигурацию для react-slick:

infinite: true,
speed: 500,
slidesToShow: 6,
slidesToScroll: 5,
swipeToSlide: true,
autoplay: true,
arrows: false
dots: false

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

Похоже, что даже простое использование slick приводит к зависанию страницы во время слайда.


reactjs react-slick slick.js
person iPhoneJavaDev    schedule 28.02.2020    source источник
comment
Здравствуй. вы можете разместить демо на codesandbox.io   -  person gakeko betsi    schedule 05.03.2020
comment
Эта проблема? github.com/akiran/react-slick/issues/1274   -  person Joseph Dykstra    schedule 05.03.2020
comment
Вы можете повторить, просто добавив пятно на странице. Эта страница может содержать другие компоненты, которые переполняются, поэтому вы видите полосу прокрутки. Попробуйте прокрутить вниз и вверх, и вы почувствуете, что он останавливается всякий раз, когда это пятно скользит.   -  person iPhoneJavaDev    schedule 05.03.2020

Ответы (1)


arrow_upward
2
arrow_downward

Я знаю, что это не идеально, но похоже, что react-slick не поддерживается уже несколько месяцев (и у него также есть проблемы с производительностью: https://github.com/akiran/react-slick/issues/1274)., которые не были рассмотрены сопровождающим).

Я бы попытался заменить его другим компонентом карусели и посмотреть, улучшится ли производительность. Я выбрал этот, так как использовал его раньше, и, похоже, он поддерживается лучше, чем react-slick: https://github.com/express-labs/pure-react-carousel

Это еще одна библиотека, которую я использовал раньше — https://github.com/leandrowd/react-responsive-carousel, но он не обновлялся несколько месяцев, поэтому в данный момент я не могу его рекомендовать.

person tudor.gergely    schedule 08.03.2020
comment
На самом деле, даже просто используя slick без всех этих реактивных версий, вы можете видеть, что страница зависает, пока она автоматически скользит. Чем эти другие версии реакции отличаются, когда сам базовый модуль slick уже вызывает зависание. - person iPhoneJavaDev; 11.03.2020
comment
Я думаю, что причина зависания заключается в том, что я реализую onBeforeChange, где я обновляю переменную состояния. Затем один компонент зависит от этого состояния, чтобы определить текущий слайд. Когда я прокомментировал реализацию onBeforeChange, зависаний больше не было. Но почему реагировать все зависает при обновлении состояния? - person iPhoneJavaDev; 11.03.2020
comment
Покажите мне свой код, может быть несколько причин, но, скорее всего, вы запускаете нежелательные повторные передачи. - person tudor.gergely; 11.03.2020