主页 / 问题 / 1330977
Accepted
GeoPr
Asked:2022-09-22 18:56:04 +0000 UTC2022-09-22 18:56:04 +0000 UTC

我需要记住一个作为参数传递给钩子的函数吗

  • 772
const Component = () => {
    const fn = () => {};
    const fromHook = useSomething(fn);
}

钩：

const useSomething = callback => {
    const hookFn = useCallback(() => callback(), [callback])
    return hookFn;
};

我是否需要将它包装fn在组件中的 useCallback 以避免不必要的渲染，或者它不会有帮助，只会让情况变得更糟？

javascript

1 个回答

  1. Best Answer

    需要包起来。每次创建一个新函数时，它都是一个新对象，即使函数的主体没有改变，所以如果它没有被包裹在 useCallback 中，钩子的 useCallback 将在每次重新渲染父函数时发出一个新函数，这可以导致不必要的子级重新渲染或重新启动将传递此函数的其他钩子。如果你包装它，每个重新渲染都会赋予相同的功能，不会有不必要的重新渲染

    举个例子，在控制台可以看到组件重新渲染后，功能没有变化 https://codesandbox.io/s/still-river-t9hwm?file=/src/App.js

    • 3

相关问题