消除React的useEffect中的冗余依赖
P粉333395496
P粉333395496 2024-04-01 13:43:57
0
1
474

我有一个 useEffect,它有两个依赖项:

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

但是,currentProjects 正在 useEffect 中设置,该 useEffect 具有 currentTenant 作为依赖项:

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

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

这是多余的吗?这样做更好的方法是什么?也许通过从 doSomething() useEffect 中删除 currentTenant

预先感谢您的帮助。

P粉333395496
P粉333395496

全部回复(1)
P粉291886842

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

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

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

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板