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

Question

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

如何记住这些以提高性能。 （虽然在浏览器上调试然后观察到它被多次调用）。如果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吗？所以不需要在自定义钩子中记忆。

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 调用中返回的任何内容。