Eliminieren Sie redundante Abhängigkeiten im useEffect von React
P粉333395496
P粉333395496 2024-04-01 13:43:57
0
1
457

Ich habe einen useEffect, der zwei Abhängigkeiten hat:

useEffect(() => {
   doSomething();
}, [currentTenant, currentProjects])

Allerdings wird currentProjects in useEffect festgelegt, das currentTenant als Abhängigkeit hat:

useEffect(() => {
   setCurrentProjects();
}, [currentTenant]);

doSomething() 取决于这两个状态,所以我想知道当 currentTenant 更改时 doSomething() 是否会运行两次:一次当 currentTenant 本身更改时,一次当 currentProjects (由 currentTenant 控制) ) Änderungen. < /p>

Ist das überflüssig? Was ist ein besserer Weg, dies zu tun? Vielleicht beginnend mit doSomething() useEffect 中删除 currentTenant .

Vielen Dank im Voraus für Ihre Hilfe.

P粉333395496
P粉333395496

Antworte allen(1)
P粉291886842

我认为你让事情变得容易出错并且不必要地复杂化。根据我的经验,每当人们。尝试聪明地使用 useEffect,他们只是破坏了它。

首先,确保 currentTenantcurrentProjects 是原语 - 我想情况还不是这样(例如名为 currentProjects 的东西),因此您的依赖项无论如何都不会按预期工作。

其次,如果可能的话,内联 doSomething()setCurrentProjects() 的代码,这样可以更轻松地跟踪您实际依赖的变量/依赖项。如果您已将这些方法传递给组件或在多个位置使用它们,则存在例外情况。

第三,不要依赖调用多个 useEffect 挂钩的执行顺序。文档中没有保证顺序,而且对于异步调用来说也没有多大意义。使它们彼此独立。因此,在无法确定的情况下不要假设冗余。此外,即使它按预期工作,这也是过早的优化 - 好处可以忽略不计,但代码更难理解。

第四,您依赖于组件中不会发生任何变化的想象力,并且您未来的自己以及您的同事将确切地知道/记住您的依赖性考虑因素。或者你必须用冗长的解释来评论它,让想法变得更加复杂。

一般来说,useEffect 依赖项应尽可能简单且富有表现力。他们没有太多魔法,但有很多人。尽管如此(包括我)有时也会把它们搞砸。当您大多数时候偏离“仅列出您正在使用的所有基元”规则时,就会发生这种情况。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage