Question

我试图锁定然后解锁useEffect中的Windows滚动。看来，当我要删除滚动事件侦听器时，它与要删除的引用函数scrollEvent不匹配。

感谢您的帮助。

export const Viewer = () => {
  const [view, setView] = useCustom()
  const enterView = Object.entries(view).length > 0

  const [animation, set, stop] = useSpring(() => ({
    slide: [100],
    opacity: [0],
  }))

  const scrollEvent = offsetY => () => {
    window.scrollTo({
      top: offsetY,
      behavior: "smooth",
    })
  }

  useEffect(() => {
    const offsetY = window.pageYOffset

    if (enterView) {
      set({ slide: [0], opacity: [1] })
      window.addEventListener("scroll", scrollEvent(offsetY), true)
      stop()
    } else {
      window.removeEventListener("scroll", scrollEvent(offsetY), true)
      set({ slide: [100], opacity: [0] })
    }
  }, [enterView])

  return (
    <ViewerComponent
      setView={setView}
      isActive={enterView}
      inAnimation={animation}
      data={view}
    />
  )
}

Answer 1

这样做的原因是scrollEvent会在每个渲染器中重新创建，因此它们的引用将不匹配。最简单的方法是将scrollEvent定义移出组件之外，因此它不是生命周期的一部分：

 const scrollEvent = offsetY => () => {
    window.scrollTo({
      top: offsetY,
      behavior: "smooth",
    })
  }

export const Viewer = () => {
  // ...

从useEffect挂钩中的窗口删除滚动事件侦听器时遇到一些麻烦

1 个答案: