Embla Carousel中slidesInView和slidesNotInView的正确使用方法

Embla Carousel是一个轻量级的轮播组件库，在React环境中使用时，开发者可能会遇到一个常见问题：直接调用API中的slidesInView和slidesNotInView方法时返回空数组。本文将深入分析这一现象的原因，并提供正确的实现方案。

问题现象分析

当开发者尝试在React组件中直接使用Embla Carousel的API方法时：

const slidesInView = emblaApi.slidesInView();
const slidesNotInView = emblaApi.slidesNotInView();

会发现这两个方法返回的都是空数组。这不是API的bug，而是因为Embla Carousel的API设计理念导致的。

根本原因

Embla Carousel的API本质上是一个非响应式的原生JavaScript API。在React环境中使用时，虽然React封装包提供了API访问能力，但它不会自动处理状态更新和响应式渲染。这意味着：

1. API调用是即时的，只反映调用时刻的状态
2. 轮播状态变化不会自动触发React组件的重新渲染
3. 需要开发者手动监听变化并更新状态

正确实现方案

要在React中正确跟踪轮播视图中可见的幻灯片，应该采用以下方法：

const [slidesInView, setSlidesInView] = useState<number[]>([]);

useEffect(() => {
  if (!emblaApi) return;
  
  // 定义更新函数
  const updateSlidesInView = (emblaApi: EmblaCarouselType): void => {
    setSlidesInView(emblaApi.slidesInView());
  };

  // 初始化时获取当前可见幻灯片
  updateSlidesInView(emblaApi);
  
  // 监听幻灯片进出视图事件
  emblaApi.on('slidesInView', updateSlidesInView);
  
  // 监听轮播重置事件（如窗口大小变化）
  emblaApi.on('reInit', updateSlidesInView);

  // 清理事件监听
  return () => {
    emblaApi.off('slidesInView', updateSlidesInView);
    emblaApi.off('reInit', updateSlidesInView);
  };
}, [emblaApi]);

实现原理详解

1. 状态管理：使用React的useState来维护当前可见幻灯片的索引数组
2. 初始化更新：组件挂载后立即获取初始可见幻灯片
3. 事件监听：
   • slidesInView事件：当幻灯片进入或离开视图时触发
   • reInit事件：当轮播重置时触发（如响应式布局变化）
4. 清理机制：在组件卸载时移除事件监听，避免内存泄漏

最佳实践建议

1. 对于需要频繁访问可见幻灯片的情况，建议将上述逻辑封装成自定义Hook
2. 考虑添加防抖处理，特别是在响应式布局中，避免频繁的状态更新
3. 对于复杂场景，可以结合使用slidesNotInView来实现更精细的控制

通过这种实现方式，开发者可以准确获取轮播组件中当前可见的幻灯片，并在React的响应式系统中正确更新UI。