如何将React useCallback和useEffect与外部依赖项一起使用

Question

我正在尝试使用react-plugin-react-hooks。

我有一个向window (onScroll)添加事件侦听器的useEffect。onScroll使用window.pageYOffset。

function onScroll() {
    if (window.pageYOffset > 0) {
      setFoor(bar)
    } else {
      setFoor(baz)
    }
  }

现在在useEffect中，我有：

useEffect(() => {
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

这是遵循最初支持的建议，如果你传递一个空的依赖数组，它就像componentDidMount。但React文档明确指出，您要么不传递依赖项(甚至不是空数组)，要么传递所有依赖项(引用属性或状态)。(https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)，这样看起来就像：

useEffect(() => {
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [onsScroll]);

但这意味着我必须为onScroll使用useCallback，否则它将始终具有不同的依赖性。但onScroll的useCallback“依赖项”将是window.pageYOffset，但这不起作用，即：

function onScroll = React.useCallback(() => {
    if (window.pageYOffset > 0) {
      setFoor(bar)
    } else {
      setFoor(baz)
    }
  }, [window.pageYOffset])

我的一般问题是，如何处理具有外部依赖关系的useEffect/useCallback函数？(除了忽略警告之外。)

谢谢

我还尝试在useEffect中完全移动onScroll定义，但它没有正确更新。

useEffect(() => {
    function onScroll() {
      if (window.pageYOffset > 0 && !slim) {
        setSlim(true);
      } else {
        setSlim(false);
      }
    }
    window.addEventListener('scroll', onScroll, onScrollOptions);
    onScroll();
    getAccountAction();
    return () => {
      window.removeEventListener('scroll', onScroll, onScrollOptions);
    };
  }, []);

Answer 1

依赖项应该是属性或状态，这里你有一个定义为依赖项的类方法，在你的例子中，我想你想要挂载事件侦听器，效果类似于componentDidMount，你可以通过设置一个空数组作为依赖项来实现。在这种情况下，这不是错误的，因为效果中的逻辑不使用组件范围内的任何变量。

在事件处理程序中，我将通过设置pageoffset的值来更改状态，并在另一个效果中使用该状态作为依赖项

Answer 2

即使在useEffect内部定义了滚动处理程序，仍然需要从外部访问偏移量，需要在依赖数组和slim状态变量内部跟踪偏移量。

您的onScroll函数可以通过使用setState的函数形式来简化，在这种情况下，您将不再需要跟踪slim状态变量：

useEffect(() => {
  function onScroll() {
    setSlim(currentSlim => window.pageYOffset > 0 && !currentSlim)
  }

  window.addEventListener('scroll', onScroll, onScrollOptions);
  getAccountAction();
  return () => {
    window.removeEventListener('scroll', onScroll, onScrollOptions);
  };
}, [window.pageYOffset]);