如何使用带有外部依赖项的 React useCallback 和 useEffect答案

【问题标题】：How to use React useCallback and useEffect with outside dependencies如何使用带有外部依赖项的 React useCallback 和 useEffect
【发布时间】：2019-11-06 22:53:23
【问题描述】：

我正在尝试关注 react-plugin-react-hooks。

我有一个useEffect，它向window (onScroll) 添加了一个事件监听器。 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 文档明确说你应该不传递依赖项（甚至不传递空数组），或者传递所有依赖项（引用 props 或 state）。 (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]);

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

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

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

谢谢

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

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);
    };
  }, []);

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

Dependencies 应该是 props 或 state，这里你有一个定义为依赖的类方法，在你的情况下，我想你想挂载事件监听器，效果类似于 componentDidMount，你可以通过设置一个空数组来实现一个依赖。在这种情况下，这并没有错，因为效果中的逻辑不使用组件范围内的任何变量。

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

【讨论】：

> 依赖项应该是 props 或 state OK，但有时效果会调用外部库之类的东西，这不能包含在依赖项中，但它是效果的一部分

【解决方案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]);

【讨论】：