不要让我以完全合理的方式使用`useEffect` [英] React won't let me use `useEffect` in a completely reasonable way

问题描述

我创建了以下助手函数，因为Reaction中的功能组件没有mount和unmount事件。我不在乎人们怎么说；Use Effect不是等价物。它可以如下所示：

//eslint-disable-next-line
export const useMount = callback => useEffect(callback, []);

//eslint-disable-next-line
export const useUnmount = callback => useEffect(() => callback, []);

Reaction不允许我这样做，因为从技术上讲，我从非组件函数调用useEffect。我之所以这样做，是因为当我使用useEffect作为装载或卸载事件时，它会用关于不在依赖项列表中包括某些内容的毫无意义的警告来污染我的终端。我知道，我应该这么做的……

export default function MusicPlayback(...) {
    ...
    useEffect(() => stopMusic, []);
    ...
}

但随后我收到stopMusic未作为依赖项包括在内的警告。但我不希望它成为依赖项，因为这样useEffect将不再是卸载事件，并且stopMusic将在每次呈现时被调用。

我知道是eslint在警告我，我可以使用//eslint-disable-next-line，但它太难看了，不能在每个需要卸载处理程序的单个文件中都有。

据我所知，如果不在任何地方都使用//eslint-disable-next-line，就不可能有一个卸载处理程序。有什么办法可以解决这个问题吗？

推荐答案

好吧，相关性检查存在是有原因的，即使您认为它不应该存在。

  useEffect(() => {
    stopMusic()
    ...
  }, [stopMusic, ...])

让我们来谈谈stopMusic，假设这是来自另一个第三方的全局函数。如果实例从不更改，则应将其作为依赖项激发，因为它不会有任何影响。

如果stopMusic实例确实发生了更改，那么您需要问问自己，为什么不想将其作为依赖项，因为它可能会意外地调用旧的stopMusic。

现在，假设您对所有这些都很在行，但仍然不希望它与stopMusic连接，那么请考虑使用引用。

  const ref = useRef({ stopMusic })

  useEffect(() => ref.current.stopMusic(), [ref])

无论哪种方式，都必须依赖于某些东西，也许您的业务逻辑不想依赖于此。但从技术上讲，只要您需要调用不属于useEffect的内容，它就需要是依赖项。否则，从useEffect的角度来看，这是一个不同步的问题。Ref(或任何对象)的要点是故意进入这种不同步状态。

当然，如果您真的讨厌这个短裤规则，我相信您可以禁用它。

注意：

Reaction社区正在提出一种方法，将来可以在您背后为您添加这些依赖项。它背后的理性是Reaction被设计为对单向列车中的数据进行反应。

这篇关于不要让我以完全合理的方式使用`useEffect`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！