我有这个自定义钩子:
const useSomething = () => {
const displayAlert = (text) => {
alert(text);
};
return {displayAlert};
};
现在我想在我的代码中的某个地方使用它,如下所示:
const SampleComponent = () => {
const {displayAlert} = useSomething();
const navigateHandler = (event, page) => {
// some api
// ...
displayAlert('Some alert');
};
const navigateHandlerCallback = useCallback(() => {
navigateHandler(null, 1);
}, []);
useEffect(navigateHandlerCallback, []);
return (
<button onClick={e => { navigateHandler(e, 5); }}>
Navigate to 5th page
</button>
)
};
现在的问题是 eslint 警告:
React Hook useCallback 缺少依赖项:“navigateHandler”。包含它或删除依赖项数组
当我包括navigateHandler
作为依赖useCallback
依赖数组,eslint 说:
“navigateHandler”函数使 useCallback Hook(第 XXX 行)的依赖关系在每次渲染时发生变化。要解决此问题,请将“navigateHandler”定义包装到其自己的 useCallback() Hook 中
- 我无法改变
navigateHandler
功能。
- 我不确定另一个回调是否可以以最佳性能解决我的问题。
????对此我该怎么办?
更新您的自定义挂钩useCallback
:
const useSomething = () => {
const displayAlert = useCallback((text) => {
alert(text);
};, [])
return {displayAlert};
};
然后在你的组件中:
const SampleComponent = () => {
const {displayAlert} = useSomething();
const navigateHandler = useCallback((event, page) => {
// some api
// ...
displayAlert('Some alert');
}, [displayAlert]);
const navigateHandlerCallback = useCallback(() => {
navigateHandler(null, 1);
}, [navigateHandler]);
useEffect(navigateHandlerCallback, []);
return (
<button onClick={e => { navigateHandler(e, 5); }}>
Navigate to 5th page
</button>
)
};
通过使用useCallback
这肯定会提高渲染过程中的性能。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)