1

我有这个自定义钩子：

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 说：

e 'navigateHandler' 函数使 useCallback Hook（在第 XXX 行）的依赖关系在每次渲染时发生变化。要解决此问题，请将“navigateHandler”定义包装到它自己的 useCallback() Hook 中

  • 我不能改变navigateHandler功能。
  • 我不确定另一个回调是否可以以最佳性能解决我的问题。

我该怎么办？

4

1 回答 1

3

使用以下命令更新您的自定义挂钩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它肯定会提高渲染期间的性能。

于 2020-11-02T09:43:49.320 回答