React自定义挂钩多次运行useEffect

Question

我有一个自定义钩子，它只有useEffects并返回null。我正在App.js文件中使用它。但现在我必须返回一个函数，并在其他组件中导入该自定义钩子。但是当我在另一个组件中调用那个自定义钩子时。useEffects也运行(导致多次，这就是问题所在(。但我只需要它们在App.js文件中运行一次。

我用这个if语句来解决这个问题。我在App.js中传递isApp true，而在其他组件中没有。但是，还有其他方法可以解决这个问题吗。我不喜欢的这种方法

useEffect(() => {
if (!props?.isApp)
return;
func();
}, [
someDependencies
]);

Answer 1

我也经历了同样的事情，x个组件使用了我的自定义Hook，这意味着每次调用自定义Hook时都会执行useEffect(s)。

要纠正这种情况，最好的方法是将useEffect的逻辑放在钩子内的函数中，然后在组件树中提升的某个组件中调用它，这样函数只执行一次，因为只有一个组件才是具有useEffect的组件。

之前：

export const useCustomHook = () => {
useEffect( () => {
//  Load user location...
}, [] );
};
export const HomePage = () => {
useCustomHook();
return (
// Jsx...
);
};

之后：

export const useCustomHook = () => {
const loadUserLocation = async () => {
// Load user location...
};
return {
loadUserLocation
};
};
export const HomePage = () => {
const { loadUserLocation } = useCustomHook();
useEffect( () => {
loadUserLocation();
}, [] );
return (
// Jsx...
);
};

如果您的useEffect与自定义Hook有任何依赖关系，那么只需要导出它并在组件的useEffect中使用它就足够了。

我希望它能帮助你和任何读到这篇文章的人。祝你一切顺利！

Answer 2

useEffect(回调，依赖项(是管理功能组件中副作用的钩子。回调参数是一个用于放置副作用逻辑的函数。dependencies是副作用的依赖项列表：是props或state值。

useEffect(callback，dependencies(在初始挂载后调用回调，如果依赖项中的任何值发生了更改，则在以后的渲染中调用回调。

如果更改其中一个依赖项，则会执行效果函数。如果您更改效果函数中的依赖项，您将有一个无限循环

Answer 3

a。如果你只想跑一次！

useEffect(((=>｛func((；｝，[](；

b。如果你想基于deps运行一次。

function useCall(callback, condition = true) {
const ref = React.useRef(false);
React.useEffect(() => {
if (condition && !ref.current) {
ref.current = true;
callback();
}
}, [callback, condition]);
}
useCall(()=>{ }, isCondition);