如何正确使用 useEffect()？

Question

我想通过滚动来改变样式。

此代码无法正常工作 . 当我上下滚动太多次太快时，浏览器就会死机、崩溃。

我想我用错了useEffect()。我该如何解决这个问题。

const ArticleItem = ({title, content, active, chapter, program, id, scrollPos}) => {
  const ref = useRef(null);
  const client = useApolloClient();

  useEffect(() => {
    if(ref.current.offsetTop <= (scrollPos + 200)) {
      client.writeData({data: {
        curChapter: chapter.num,
        curArticle: id,
        curProgram: program.name
      }});
    }
  });

  if(active === false)
    return ( // Inactive Article
      <div className='section-item' ref={ref}>
        <h2>{title.toUpperCase()}</h2>
        <ReactMarkdown source={content} />
        <br />
      </div>
    )
  return (  // Active Article
    <div className='section-item active' ref={ref}>
      <h2>{title.toUpperCase()}</h2>
      <ReactMarkdown source={content} />
      <br />
    </div>
  )
}

结果，我遇到了这个警告。

警告：已超出最大更新深度。当组件在 useEffect 中调用 setState 时，可能会发生这种情况，但 useEffect 要么没有依赖数组，要么每次渲染时其中一个依赖项都发生了变化。

我认为这是问题的原因？！

Answer 1

根据我上面的评论，您还需要包含 useEffect 的依赖数组。以目前的方式，它无限运行。可能您想将scrollPos 包含在其中，因此它只会在scrollPos 发生变化时触发。

尝试以下方法：

useEffect(() => {
    if(ref.current.offsetTop <= (scrollPos + 200)) {
      client.writeData({data: {
        curChapter: chapter.num,
        curArticle: id,
        curProgram: program.name
      }});
    }
}, [scrollPos]);

我希望这会有所帮助！

Answer 2

好吧，问题一直被触发，您可以使用scroll 事件监听器并在触发此事件时进行更改。

const [scrollItem, setScrollItem] = useState(null);

const handleScroll() {
  if(scrollItem) {
     // logic goes here
  }
}

useEffect(() => {
  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []); // initialize event only once

return (
   <div ref={setScrollItem}>
      ...
   </div>
);

编辑

避免那个解决方案，@norbitrial 是对的