Реагировать на обработчики событий, делегирование - PullRequest
Новая
       23

Реагировать на обработчики событий, делегирование

0 голосов
/ 24 сентября 2018

Я видел некоторые другие посты по этому вопросу, но не понял.

Если у меня большая таблица, с нажимаемой кнопкой действия в каждой строке. 

<tbody>
<tr>
   <td><button onClick={this.handleClick}></button></td>
</tr>
</tbody>

В jquery Iсвязал бы событие с элементом <tbody>, так как я знаю, что он имеет лучшую производительность.В реакции, если я связываю событие click непосредственно с кнопкой, сколько обработчиков фактически создано?Это будет так же эффективно, как делегирование событий?

Я пытался использовать onClick на <tbody>, и когда я получаю доступ к объекту события в консоли, я вижу это предупреждение: 

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `altKey` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

1 Ответ

0 голосов
/ 24 сентября 2018

Мне кажется, есть 3 разных вопроса.

  1. Есть ли возможность использовать делегирование?Да, вы можете установить обработчик одного события на <tbody> и проверить на event.currentTarget.<some attribute to know what it is>.

  2. Почему отображается предупреждение?Это потому, что объект события фактически используется повторно, поэтому, если ваш обработчик работает с Event асинхронно, например 

    handleClick(event) {
    setTimeout(() => {
        alert(event.target.id);
    }, 100);
}

    , вы не можете быть уверены, что это то же самое событие.Вам следует немедленно сохранить необходимую информацию, а затем использовать ее 

    handleClick(event) {
    let id_to_store = event.target.id;
    setTimeout(() => {
        alert(id_to_store);
    }, 100);
}
  3. . Почему React ожидает от нас установки явных обработчиков событий вместо использования делегирования?Разве делегирование не намного эффективнее?На самом деле, нет.Если вы не создадите новую функцию-обработчик для каждого элемента , это приведет к очень незначительным накладным расходам.Но как преимущество явного связующего обработчика вы не будете беспокоиться об утечке памяти, потому что обработчик делегирован слишком общему родительскому элементу, который живет достаточно долго .Это единственная причина?Нет, также обработчики, установленные явно, лучше подходят для сравнения "Virtual DOM против реального DOM".

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

...