用于地图渲染的 React useCallback 钩子

Question

将回调传递给组件时，我应该使用useCallback钩子返回一个记忆化的回调（以防止不必要的渲染）：

import doSomething from "./doSomething";
const FrequentlyRerenders = ({ id }) => {
  const onEvent = useCallback(() => doSomething(id), [id]);
  return (
    <ExpensiveComponent onEvent={ onEvent } />
  );
};

但是如果我使用地图呢？例如：

import doSomething from "./doSomething";
const FrequentlyRerendersMap = ({ ids }) => {
  return ids.map(id => {
    const onEvent = useCallback(() => doSomething(id), [id]);
    return (
      <ExpensiveComponent key={id} onEvent={ onEvent } />
    );
  });
};

我应该如何正确使用useCallback？以上是传递多个回调的正确方法吗？它真的有效并且知道根据数组的一个项目来记忆每个回调吗？

Answer 1

将返回的映射 JSX 转换为组件，然后您就可以使用Callback 没有问题

import doSomething from "./doSomething";
const MappedComponent =(props) => {
   const onEvent = useCallback(() => doSomething(props.id), []);
   return (
      <ExpensiveComponent onEvent={ onEvent } />
   );
}

const FrequentlyRerendersMap = ({ ids }) => {
  return ids.map(id => {
    return <MappedComponent key={id} id={id} />
  });
};