useCallback в компоненте элемента списка вместо родительского

Я создал приложение для реагирования, в котором у меня есть список элементов с действием удаления. Я знаю, что если я передаю это действие удаления от родителя (контейнера элементов), я могу использовать useCallback в родительском элементе, чтобы предотвратить ненужное воссоздание метода удаления.

Но что произойдет, если я определю метод удаления в компоненте элемента и использую в нем useCallback? не сработает? не будет ли он использовать тот же заученный метод, не создавая каждый раз новый?

другими словами, каков объем запоминания? это глобально? или на компонент?

псевдокод:

function ListComponent(){
  let arr = [1,2,3]
  return <div>
    {
      arr.map(item => <Item id={item} />
    }
  </div>
}

function Item({id}){
  let memorizedDelete = useCallback(() => alert("deleting"))
  return <div onClick={memorizedDelete} >  {id} </div>
}

спасибо


reactjs usecallback
person eyal gromzin    schedule 27.01.2021    source источник
comment
Обратите внимание, что вызов useCallback без массива зависимостей, как вы здесь делаете, означает, что функция не запомнена. См .: stackoverflow.com/a/55027723/882638   -  person ericgio    schedule 27.01.2021
comment
Как написано в вашем примере кода, для каждого экземпляра Item будет создана отдельная мемоизированная функция.   -  person ericgio    schedule 27.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Каков объем запоминания? это глобально? или на компонент?

Это определенно не глобально.

Перехватчики React действительны только в теле функциональных компонентов или других перехватчиках реакции. Тогда область видимости будет ограничена телом функционального компонента или телом функции, определяющей настраиваемую ловушку.

Компонент Объем

const MyFunctionalComponent = () => {
  const memoizedCallback = useCallback(() => expensiveFn(...args), [...args]);
  // memoizedCallback enclosed in scope of MyFunctionalComponent
};

Объем функции крючка

const useMyCustomHook = (arg, deps) => {
  // other hooks and logic
  const memoizedCallback = useCallback(() => expensiveFn(...args), [...args]);
  // memoizedCallback enclosed in scope of useMyCustomHook
};

Примечание. Пользовательский обработчик может возвращать мемоизированный обратный вызов, поэтому его область действия по-прежнему ограничена областью компонента, создающего экземпляр обработчика реакции.

Но что произойдет, если я определю метод удаления в компоненте элемента и использую в нем useCallback? не сработает? не будет ли он использовать один и тот же заученный метод, не создавая каждый раз новый?

Это создаст мемоизированный обратный вызов, который передается только одному дочернему элементу, на самом деле здесь нет никакой выгоды, кроме случаев, когда сопоставленный массив обновляется, тогда обратный вызов не нужно будет воссоздавать.

person Drew Reese    schedule 27.01.2021