重用的自定义钩子内部的useEffect执行多次



我有一个自定义挂钩,应用程序中的N个组件同时使用它。

在自定义挂钩中有一个useEffect,它在正确的时间/正确地给定依赖项执行,但它执行了N次(每个组件都加载了它(。。。这似乎是对的。

然而,我想知道是否有办法让它只执行一次,即使它是";"父";自定义挂钩是";安装";多次。

感谢

let alreadyCalled = false;
function myHook() {  
useEffect(() => {
if (alreadyCalled) {
return;
}
alreadyCalled = true;
//calculate here
})
}

useEffect的目的是将一段逻辑的执行绑定到使用它的组件的生命周期。您正在询问如何避免将该逻辑与某些组件的生命周期联系起来。

听起来不应该在这N个组件中的任何一个中使用它,但可能应该在父组件中使用,然后父组件会通过道具或上下文传递结果状态。

如果它被隐藏在一个自定义钩子中,您可能需要将它从那里拉出,在父组件中调用它,并将它产生的任何状态作为参数传递给该自定义钩子。