Различия в передаче данных в качестве параметра или получении их из объекта события в функциях обработчика событий?

Question

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

{photos.map((photo, index) => (
  <img
    onClick={this.handleIndexClick}
    data-index={index}
    key={photo.value}
    src={photo.value}
    className={index === active ? "active" : ""}
    alt="animal thumbnail"
  />
))}

Существует обработчик кликов, который берет индекс из объекта события и затем устанавливает состояние на основе этого индекса.

handleIndexClick = event => {
  this.setState({
    active: +event.target.dataset.index
  });
};

Есть ли разница в производительности, если мы отправим индекс непосредственно в качестве параметра?

<img
  onClick={this.handleIndexClick(index)}
  data-index={index}
  key={photo.value}
  src={photo.value}
  className={index === active ? "active" : ""}
  alt="animal thumbnail"
/>

И тогда функция будет выглядеть так:

handleIndexClick = index => {
  this.setState({
    active: +index
  });
};

Какой подход лучше и предпочтительнее?

Answer 1

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

<img
  onClick={this.handleIndexClick(index)}
  data-index={index}
  key={photo.value}
  src={photo.value}
  className={index === active ? "active" : ""}
  alt="animal thumbnail"
/>

handleIndexClick = index => () => {
  this.setState({
    active: +index
  });
};

Я думаю, что выше легче читать и поддерживать. И я также считаю, что это меньше символов, используемых. В вашем первом примере это 324 символов, а во втором 258. Поэтому технически будет стоить меньше памяти, уменьшая размер вашего пакета, что приведет к faster compiling. Runtime performance Я считаю, что было бы равным. Но, как я сказал в общей схеме, это не имеет большого значения и сводится к тому, насколько readable и maintainable ваш код.

Также, я думаю, вам не нужно передавать event вам onClickHandler. Но если бы вам пришлось пропустить parameter и событие, вы бы сделали что-то вроде этого.

handleIndexClick = index => event => {
  this.setState({
    active: +index
  });

  // Can use the event if needed
};

Answer 2

Я думаю, что нет разницы в производительности между двумя способами получения значения индекса в методах.Объекты событий являются важной частью React и JS вообще.Так что учебник научит вас, как работать с событиями и как извлечь значения из объекта события.Вы можете выбрать наиболее удобный для вас способ и использовать его.Я предпочитаю передавать значения непосредственно в функцию.Но если я работаю со входами, я извлекаю его значение из объекта события.