Реагировать перехватом 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

Ответ на вопрос архитектора обходит вопрос IMO. Хотя я думаю, что создание нового компонента, вероятно, хорошая идея.

Чтобы ответить на вопрос, ваш код:

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

На самом деле это то, что вы хотели бы сделать, чтобы запомнить на карте. Я не знаю реализацию useCallback, но это должно добавить очень мало памяти. StackFrame и все, что они делают, чтобы превратить массив в какой-то ключ для запомненной функции.

Если вы не работаете над некоторыми с ТОННЫМИ элементами, EG реагирует на виртуализированные компоненты с неограниченной прокруткой, вы реально можете использовать Обратный вызов таким, какой вы есть. На самом деле, небольшие накладные расходы памяти, вероятно, намного дешевле, чем повторное отображение всех этих компонентов.

Answer 2

Конвертируйте возвращенный сопоставленный JSX в компонент, и тогда вы сможете без проблем использовать Обратный вызов

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} />
  });
};