React 生命周期和 Intersection 观察器

Question

我正在 React 中基于 CSS 垂直对齐构建一个图像滑块。有两种方法可以与之交互，通过垂直滚动或单击导航按钮。我在 React useEffect() 中使用 Intersection Observer API 来检测活动项目。但是，如果没有任何 useEffect lint 错误，我似乎无法正确处理。每当我按照 lint 的建议将函数包含在 dependecy 数组中时，滚动时不会设置活动项。

我是在使用 React 反模式还是只是遗漏了什么？

Live demo

代码：

const Slider = ({images}) => { 
  const [currentSlide, SetCurrentSlide] = React.useState(0);
  
  const setSlide = (id) => {
      SetCurrentSlide(id);
  };
  
  const moveToSlide = (id) => {
    if(id > -1 && id < images.length) {
      SetCurrentSlide(id);
    }
  } 

  return (
    <StyledSlider id="slider">
      <SliderWrapper items={images} setSlide={setSlide} currentSlide={currentSlide} />
      <SliderNav currentSlide={currentSlide} moveToSlide={moveToSlide} maxItems={images.length}/>
    </StyledSlider>
    )
}
    
const SliderWrapper = ({items, setSlide, currentSlide}) => {
  const containerRef = React.useRef(null);
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });
  
  const handleSetSlide = (id) => {
    setSlide(id);
  }; 
  
  const handleIntersection = (entries) => {
    const [entry] = entries;
    const activeSlide = Number(entry.target.dataset.slide);
    if (!entry.isIntersecting || activeSlide === "NaN") return;

    handleSetSlide(activeSlide);
  };
  
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      handleIntersection,
      {
        root: containerRef.current,
        threshold: 0.45
      }
    );
    Array.from(containerRef.current.children).forEach((item) => {
        observer.observe(item);
    });
    return function() {
       observer.disconnect();
    }
  }, [items]);
  
  return (
        <StyledSliderWrapper ref={containerRef} >
            {items.map((item, index) => {
                return <SliderItem key={index} index={index} image={item} isActive={currentSlide === index} />
                })}
        </StyledSliderWrapper>
  )
};

const SliderItem = ({index, image, isActive}) => {
    const imageContent = getImage(image.url);
    const imageRef = React.useRef()

    React.useEffect(() => {
      if(!isActive) return;

      imageRef.current.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
    },[isActive]);

    return (
        <StyledSliderItem data-slide={index} ref={imageRef}>
            <GatsbyImage image={imageContent} alt={image.description} />
        </StyledSliderItem>
    )
}

Answer 1

所以您在 SliderWrapper 的 useEffect 中缺少依赖项。您也可以稍微简化一下代码。

SliderWrapper

因为除了 Observer 之外没有其他调用 handleIntersection 回调，你可以安全地将它 移动到 useEffect 回调体。这使得唯一的依赖是 setSlide 回调，它作为 prop 从 parent 组件传递。

const SliderWrapper = ({ items, setSlide, currentSlide }) => {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    const handleIntersection = (entries) => {
      const [entry] = entries;
      const activeSlide = Number(entry.target.dataset.slide);
      if (!entry.isIntersecting || activeSlide === "NaN") return;

      setSlide(activeSlide);
    };

    const observer = new IntersectionObserver(handleIntersection, {
      root: containerRef.current,
      threshold: 0.45
    });
    Array.from(containerRef.current.children).forEach((item) => {
      observer.observe(item);
    });
    return function () {
      observer.disconnect();
    };
  }, [setSlide]);

  return (
    <StyledSliderWrapper ref={containerRef}>
      {items.map((item, index) => (
        <SliderItem
          key={index}
          index={index}
          image={item}
          isActive={currentSlide === index}
        />
      ))}
    </StyledSliderWrapper>
  );
};

滑块

另一个问题是您在 child 中记忆 setSlide 道具，而不是在 parent 中传递它。这导致 setSlide 道具成为 new 引用每个渲染和 re-memoized 通过 useCallback 在child。 React useState updater 函数是稳定的，所以你可以直接将它们传递给 children.

const Slider = ({ images }) => {
  const [currentSlide, setCurrentSlide] = React.useState(0);

  const moveToSlide = (id) => {
    setCurrentSlide(id);
  };

  return (
    <StyledSlider id="slider">
      <SliderWrapper
        items={images}
        setSlide={setCurrentSlide} // <-- pass directly to child
        currentSlide={currentSlide}
      />
      <SliderNav
        currentSlide={currentSlide}
        moveToSlide={moveToSlide}
        maxItems={images.length}
      />
    </StyledSlider>
  );
};

如果您想继续使用 parent 中的 setSlide 处理程序，您可以在此处记住回调，以便 parent 提供稳定的参考。请注意，这仅在记忆 non-useState 函数时有用。

const setSlide = React.useCallback(
  (id) => {
    setCurrentSlide(id);
  },
  [setCurrentSlide]
);

React 生命周期和 Intersection 观察器

React life cycles and Intersection observer

reactjs

intersection-observer

use-effect