useEffect exhaustive-deps 警告:这试图避免哪些可能的问题?

useEffect exhaustive-deps warning: what possible issues is this trying to avoid?

我发现有很多关于React useEffect hook 的依赖数组的问题,以及可能因缺少依赖项而出现的eslint 警告。关于此的其他一些很好的讨论:

虽然这些警告的原因和解决方案非常清楚,但我很难理解的一件事是原因。首先,快速总结一下,我的理解是 useEffect 作为三个通用目的:

我知道如果 useEffect 引用了在 useEffect 之外声明的任何函数(或其他变量),eslint 会报错。根据以上链接,有多种方法可以解决这些警告:将函数添加到依赖数组并使用 useCallback 记住它;使用 // eslint-disable-next-line// eslint-disable-line react-hooks/exhaustive-deps 禁用警告;等这些都是有道理的。我很难理解的是为什么它甚至抱怨这个。

所以,我的具体问题:

  1. 实际上,我无法理解为什么您曾经想要引用依赖项数组中的局部函数。例如,如果你有 useEffect(() => { checkCurrentUser() }, []),并且 checkCurrentUser 需要在 useEffect 之外定义,因为它在别处被调用,checkCurrentUser 将在每个组件渲染时重新定义(这就是为什么如果我们把它放在数组中,我们应该 memoize它带有 useCallback)。但对我来说,为什么有人会在依赖数组中想要这个完全没有逻辑意义。那么为什么这甚至是一个警告呢?这个警告实际上有助于防止什么?在我看到警告的所有时间里,在每种情况下,应用程序的行为都与我完全一样 expected/intended.

  2. 如果 useEffect 的主要目的之一是 'run once' 像 componentDidMount,而实现该行为的方法是显式放置一个空数组,那么如果指定一个空数组?我能理解为什么如果您有一个包含一些引用但不包含其他引用的依赖项数组 - 如 'oops, you forgot some' - 但空数组是一种特定的、定义明确的用法,那么发出警告可能是有意义的。对我来说,它会告诉你 'an empty array is an issue,' 似乎没有意义,因为这是实现 componentDidMount 类型初始化的唯一方法。感觉就像警告你“不要使用 componentDidMount()”一样。为什么它会抱怨空数组,如果这应该是 useEffect 的 3 个主要用途之一?

再次强调一下,这个警告出现的情况,以及解决的方法,我都明白。我只是很难理解拥有它的好处,(1) 在函数的情况下(我们明确知道它会在每次渲染时发生变化),以及 (2) 在空数组的情况下(这是一个特定的用法) ).

(1) in the case of functions (which we definitively know will change on every single render)

要求将函数放在依赖项中的原因 seems to be 与他们要求您将任何其他值放入依赖项的原因相同: 可能发生的情况是,您正在使用的函数可能 本身引用了组件作用域中的某些值,这些值可能会变得陈旧。

(2) in the case of an empty array (which are a specific usage).

在这种情况下,我将参考 Dan Abramov 在 this 评论中引用的答案:

I think the biggest gotcha with class life cycle methods like componentDidMount is that we tend to think of it as an isolated method, but in fact it's part of a flow. If you reference something in componentDidMount you will most probably need to handle it in componentDidUpdate as well, or your component may get buggy. This is what the rule is trying to fix, you need to handle values over time....

您可能会在该线程中找到有关他们为何这样做的更多信息。