如何记忆自定义挂钩以提高性能

Question

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

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

我试图在钩子中添加一个函数，但是我需要 return 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']);

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

Answer 1

您可以使用 React 提供的 useMemo 钩子来记住 forEach 循环的结果：

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

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

这样，直到 fields 发生变化，result 将被记忆到 useMemo 调用中 return 的任何内容。

如何记忆自定义挂钩以提高性能

How to memoize custom hooks to improve performance

reactjs

react-hooks

usecallback

react-usememo