0

我目前正在 React 上构建一个俄罗斯方块游戏,只是为了练习钩子(过去用于在类组件中开发,有点离开 React 一段时间,昨天我决定再次使用它)。

游戏运行良好,并且在每种情况下都按预期运行,但是,在 useEffect 中使用函数而不是依赖项时,会不断出现警告。

澄清一下 - 我有一个 useEffect 函数,它所做的只是调用一个 updateFunction 并且仅依赖于移动俄罗斯方块块的 x 和 y 坐标。每当形状的位置发生变化时,更新功能都会更新电路板的状态。

我知道 React 会在每个渲染上重新创建函数,但是给更新函数一个 useCallback 会导致它被无休止地重新创建(那时,编译器会要求我让它依赖于板状态,因此每次更新板子时,都会被迫重新创建一次),这会导致渲染的无限循环。

是否真的有必要将每个函数作为依赖项放在 useEffect 中,即使这些函数只会导致视觉渲染来显示游戏的当前状态?

4

3 回答 3

0

你总是可以把整个函数放在 useEffect 里面,你想得到这个错误和问题

于 2021-09-17T18:44:09.457 回答
0

刚刚有人问了类似的问题,我的答案就在那里,React 不会让我以完全合理的方式使用 `useEffect`

您的问题的答案是,不,您不必这样做,如果警告没有打扰您,并且您的代码仍在工作,那么继续。

否则,您可以尝试找到一种方法来禁用此 linter,或者问自己为什么不满足所有依赖项要求。

于 2021-09-17T20:15:04.677 回答
0

最好将效果依赖关系视为“正确”与否,而不是尝试对其进行裁剪以实现某些特定行为。(无论如何,绝大多数时间)

这意味着如果一个效果使用一个可能会改变的值,那么它就被声明为一个依赖项。有时,如果您的依赖项“不正确”,您的应用程序可以正常工作,因为在其他地方您可以保证值是恒定的。但这更多是关于维护应用程序,而不是让它当前工作。

稍后,如果您更改其中一个依赖项在重构中的工作方式,那么现在可能需要重新运行效果,并且不会导致奇怪且难以诊断的错误,例如您无法分辨它们来自何处的陈旧值。

如果这导致繁琐的钩子带有巨大的依赖数组,它们本身无限循环,那么这表明逻辑是混乱的,需要重构,拆分成多个效果,重新考虑数据如何通过钩子流动,等等。

如果没有看到你的代码,很难给出具体的建议。但是在您的情况下,您似乎可以使“更新函数”取而代之的是参数,这意味着它可以是完全静态的。或者,如果您确实使用useCallback了依赖,x,y那么它会在这些更改时重新生成,但是当这些更改时您可能有很多逻辑要运行,所以这可能是意料之中的。


概括:

我会建议你eslint-plugin-react-hooks认真对待警告,并清理你的代码,直到它通过。从长远来看,在大型而复杂的应用程序中,它确实有助于保持事情的清洁。

在做非标准的事情时会出现非常罕见的例外情况,但在忽略这些警告之前尽你最大的努力是值得的。

于 2021-09-17T20:35:51.017 回答