react-slick导致整个页面卡顿

Question

我为react-slick设置了以下配置：

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

每次 slick 元素滑动时，整个页面都会卡顿。例如，在此 slick 之下还有一个表格。当我在 slick 滑动时尝试滚动表格，它就会卡住，必须等待 slick 完成滑动后才能滚动表格。同样的情况也发生在打开模态窗口时。如果 slick 在滑动时我打开模态窗口，它会卡住，直到 slick 完成滑动才会显示模态窗口。如何解决这个卡顿问题？似乎即使使用 slick 本身也会导致页面卡顿。

- iPhoneJavaDev

---

你好。你能在 https://codesandbox.io/ 上放一个演示吗？ - msahin

这个问题？https://github.com/akiran/react-slick/issues/1274 - Joseph Dykstra

你可以通过在页面中添加slick来复制。该页面可以包含其他组件，这些组件会溢出，因此您会看到滚动条。尝试向下和向上滚动，您会感觉到每当此slick滑动时它就停止了。 - iPhoneJavaDev

Answer 1

我知道这并不理想，但是 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 ，但是它已经几个月没有更新了，所以我暂时无法推荐它。

- tudor.gergely

---

实际上，即使直接使用“slick”而不是所有这些React版本，您也可以看到页面在自动滑动时挂起。当底层的“slick”模块已经导致挂起时，这些其他React版本有何不同呢？ - iPhoneJavaDev

我认为挂起的原因在于实现“onBeforeChange”时更新状态变量。然后，一个组件依赖于这个状态来确定当前幻灯片是什么。当我注释掉onBeforeChange的实现时，不再出现挂起情况。但是，为什么React会在状态更新时挂起所有内容呢？ - iPhoneJavaDev

展示你的代码，可能有很多原因，但最有可能的是你触发了不必要的重新渲染。 - tudor.gergely

@tudor.gergely，pure-react-carousel没有处理下一步、返回操作的函数。我们只能使用buttonback、buttonnext组件。 - bhaRATh