时间戳

首页 > 解决方案 > 如何记忆自定义钩子以提高性能

reactjs - 如何记忆自定义钩子以提高性能

问题描述

具有以下功能，这是常见的自定义钩子并从多个地方调用。

如何记住这一点以提高性能。（虽然在浏览器上调试然后观察到它被多次调用）。如果fields.forEach只记住而不是自定义挂钩下的所有代码，那也很好

我试图在钩子内添加一个函数，但是我需要返回result对象而不是函数。

export function useListObject(fields)
{
const allData = useGetAll();
const result = {};
fields.foreach((field) =>{
  ...
  ...
  ...
  result[field]= {key, value , parameters, names}
});
return result;
}

///// 组件调用如下

const listData = useListObject(['state','country','categoryTypes','category']);

//这里可以memoize吗？所以不需要在自定义钩子中记忆。

标签： reactjsreact-hooksusecallbackreact-usememo

解决方案

你可以使用useMemoReact 提供的钩子来记忆你的 forEach 循环的结果：

const result = useMemo(() => {
  const fieldData = {};

  fields.foreach((field) =>{
    ...
    ...
    ...
    fieldData[field] = { key, value , parameters, names }
  })
  
  return fieldData;
}, [fields]);

这样，在fields更改之前，result将记住您在useMemo调用中返回的任何内容。

推荐阅读