React中结合CSS Scroll-Snap、useState与子组件出现滚动闪烁问题

我在同时使用CSS Scroll-Snap、React useState和子组件时遇到了滚动闪烁问题，且只有三者同时存在时才会触发。（闪烁效果：）

最小可复现代码 #

carousel.js

import styles from './carousel.module.scss'
import { useEffect, useRef, useState } from 'react';

export default function Carousel() {
  const [currentScollPos, setCurrentScrollPos] = useState(0)
  const carouselRef = useRef()

  useEffect(() => {
    const carouselScrollUpdate = (e) => {
      setCurrentScrollPos(e.target.scrollLeft)
    }
    carouselRef?.current?.addEventListener('scroll', carouselScrollUpdate, { passive: true })
    return () => {
      carouselRef?.current?.removeEventListener('scroll', carouselScrollUpdate, { passive: true })
    }
  }, [carouselRef])

  const Slide = () => <div className={styles.carouselSlide}>Test Sub</div>
  
  return (
    <div className={styles.carouselInnerContainer} ref={carouselRef}>
      <div className={styles.carouselSlide}>Test1</div>
      <div className={styles.carouselSlide}>Test2</div>
      <div className={styles.carouselSlide}>Test3</div>
      <Slide />
    </div>
  )
}

carousel.module.scss

.carouselInnerContainer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.carouselSlide {
  flex: 0 0 auto;
  width: 50%;
  margin-left: 2rem;
  background-color: aquamarine;
  height: 200px;
  scroll-snap-align: center;
}

现象消失的触发条件 #

执行以下任一操作，闪烁都会消失：

• 注释掉 setCurrentScrollPos(e.target.scrollLeft)
• 注释掉 <Slide />
• 注释掉CSS中的 scroll-snap-align: center;

这是React重渲染逻辑与CSS Scroll-Snap的浏览器行为冲突导致的，具体拆解：

1. 内部子组件引发无意义DOM重建
   你把Slide组件定义在了Carousel组件内部，每次Carousel重渲染时，这个Slide都会被重新创建成一个全新的组件类型。React会判定这是完全不同的元素，销毁旧实例并重新挂载新的——这个过程会瞬间打乱容器内的DOM结构，让Scroll-Snap的布局计算临时失效。

2. useState更新触发重渲染，放大冲突
   滚动事件触发setCurrentScrollPos时，Carousel会因state更新重渲染，此时内部Slide被重建，DOM结构变动。而与此同时，CSS Scroll-Snap正在执行滚动对齐的定位逻辑：浏览器刚计算好要对齐到snap点，DOM变动又导致布局重新计算，滚动位置被打乱，随后Scroll-Snap又会尝试重新对齐，往复循环就出现了闪烁。

3. 强制Scroll-Snap规则加剧视觉波动
   scroll-snap-type: x mandatory会强制浏览器在滚动结束时对齐到最近snap点，scroll-snap-align: center定义了对齐规则。当DOM变动导致滚动位置偏离snap点时，浏览器会立即触发修正，这种频繁的修正和React重渲染的DOM变动叠加，就形成了肉眼可见的闪烁。

1. 把子组件移到父组件外部定义 #

避免每次重渲染都创建新的组件类型：

// 移到Carousel组件外部
const Slide = () => <div className={styles.carouselSlide}>Test Sub</div>

export default function Carousel() {
  // ... 原有代码不变
}

2. 优化滚动事件的state更新频率（可选） #

如果不需要实时获取滚动位置，用防抖减少state更新次数，降低重渲染频率：

useEffect(() => {
  const debounce = (fn, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => fn(...args), delay);
    };
  };

  const carouselScrollUpdate = debounce((e) => {
    setCurrentScrollPos(e.target.scrollLeft);
  }, 100);

  carouselRef?.current?.addEventListener('scroll', carouselScrollUpdate, { passive: true });
  return () => {
    carouselRef?.current?.removeEventListener('scroll', carouselScrollUpdate, { passive: true });
  };
}, [carouselRef]);

3. 使用useMemo缓存子组件（备选方案） #

如果必须在组件内部定义子组件，用useMemo缓存组件，避免重复创建：

const Slide = useMemo(() => {
  return () => <div className={styles.carouselSlide}>Test Sub</div>;
}, []);

内容的提问来源于stack exchange，提问作者somecoder