反应 useMemo 和 useCallback

Question

我对useMemo和useCallback的用法存疑

const componentName = () => {

...

const renderItems = () => elements.map(elem => <div> {elem.name} </div>

...
return (
   <div>
    {renderItems()}
   </div>
);
}

第一个是：我应该在函数 renderItems 中使用钩子 useCallback 吗？

另一个问题是我有一个导出常量的外部文件：

export const labels = ["label1", "label2", "label3"];

我应该在与组件位于不同文件中的变量标签上使用钩子 useMemo 吗？

谢谢！

Answer 1

1. 不需要使用useCallback因为不需要使它本身成为一个函数。 更简洁的写法应该是：

return (
   <div>
    {elements.map(elem => <div> {elem.name} </div>}
   </div>
);

但无论如何： useMemo首先用于值， useCallback用于函数定义。 在上面的代码中使用useCallback只是节省了函数定义的执行时间。 该功能仍将运行。 如果你想记忆，你可以记忆输出，这样函数只运行一次，如下所示：

const renderedJSX = useMemo(() => 
{
const val = elements.map(elem => <div> {elem.name}</div>);
return val;
},[elements]);

然后将它与您的 return 语句一起使用：

return (
   <div>
    {renderedJSX}
   </div>
);

这样你最好创建一个将elements作为道具的新组件并开始使用React.memo 。

无论您使用哪一个（ useCallback或useMemo ），您都必须使用elements作为依赖项。 一旦元素更改，您的代码将重新运行。 elements是一个数组，因此它会在每次渲染时发生变化。

2. 如果变量的范围仅限于反应组件，您可以将它们保留在函数体内。 memoize如果你想使用useMemo但这对于这样一个简单的变量来说就太过分了。 即使在单独的文件中声明，代码在解析时也只会运行一次，因此您不必担心。