Как в React запомнить встроенную функцию при использовании функциональных компонентов?

У стрелочных функций есть проблемы с производительностью, каким должен быть лучший подход для передачи события и параметра обработчику событий?

Например:

Опция 1:

 <div
    onClick = {setPerson(name)}
 />

 const setPerson = (name) => (e: any): void => {
   setPerson(name)
   e.stopPropagation()
 }

вариант 2:

<div
  onClick = {(e) => setPerson(null, name, e)}
/>

 const setPerson = (name, e): void => {
   setPerson(name)
   e.stopPropagation()
 }

reactjs event-handling react-functional-component

21.12.2020 16:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 005

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите предотвратить повторный рендеринг дочерних компонентов из-за свойства, которое получает новую функцию, вы можете запомнить его следующим образом:

const memoizedSetPerson = React.useCallback(() => { // add the parameters
 // do what you want here
}, [setPerson])

Применение:

<div onClick = {memoizedSetPerson} />


const memoizedSetPerson = React.useCallback((e) => {
     // e will be the event
}, [setPerson])

useCallback вернет запомненную функцию, поэтому просто используйте ее так же, как и любую другую функцию.

@ Ar26 добавил использование к ответу

— 22.12.2020 08:42

21.12.2020 17:08

Другие вопросы по теме

Как обрабатывать события DOM от разных кнопок с помощью одной функции-обработчика

Я не могу заставить addEventListener работать правильно

Как выполнить базовую обработку строк в процессе

Как увеличить глубину очереди PyQt5 app.processEvents()?

С# Проверить, потерял ли родительский элемент управления фокус

Панель изменения Visual Studio BackColor при событии MouseEnter для нескольких кнопок

СОБЫТИЕ CLICK РАСПРОСТРАНЯЕТСЯ ДАЖЕ БЕЗ ОБРАБОТЧИКА

Как добавить прослушиватель событий keydown для функционального компонента реакции

Когда выбран один параметр, все остальные должны быть отключены

Обработчик событий JavaScript, возвращающий 2 вывода с 1 триггером

Как в React запомнить встроенную функцию при использовании функциональных компонентов?

Ответы 1

Другие вопросы по теме

Похожие вопросы