когда использовать функцию (), функцию или () => функцию (обратный вызов)

Question

Я долго искал хорошее объяснение, так что мне все ясно. Пример:

<Char click={()=>this.onDeleteHandler(index)}/>

против

<Char click={this.onDeleteHandler()}/>

против

<Person changed={(event) => this.nameChangedhandler(event, person.id)} />

и

<Char click={this.onDeleteHandler}/>

относительно третьего кода, вот свойство, которое называется:

nameChangedhandler = (event, id) => {
const personIndex = this.state.persons.findIndex(p => {
  return p.id === id;
});

// copying the person with the right index
const person = {
  ...this.state.persons[personIndex]
};

// Assigning new name to this person
person.name = event.target.value;

// copying array of persons, then manipulating the correct object of person by using the index
const persons = [...this.state.persons];
persons[personIndex]= person;

this.setState({
  persons: persons
});

}

некоторые аспекты мне понятны, но определенно не на 100%! Так что, если вы можете дать мне объяснение, ссылку или подобное, это было бы здорово!

спасибо!

Answer 1

Обычно вы используете встроенные функции стрелок, когда вам нужно привязать обработчик к контексту или предоставить пользовательские параметры

В

<Char click={()=>this.onDeleteHandler(index)}/>

onDeleteHandler привязан к контексту, в котором Char отображается, и передается пользовательский параметр index. Так как новая функция возвращается к click, она может быть выполнена из Char как this.props.click()

<Char click={this.onDeleteHandler()}/>

Здесь onDeleteHandler вычисляется, и значение возвращается в click prop

<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />

Здесь синтаксис неверен, вероятно, он должен быть

<Person changed={(event) => this.nameChangedhandler(event, person.id)} />

В этом случае он принимает параметр по умолчанию и передает его вместе с пользовательским параметром в nameChangedHandler, а также выполняет привязку

<Char click={this.onDeleteHandler}/>

просто присваивает ссылку onDeleteHandler на click, и всякий раз, когда вы вызываете click, onDeleteHandler будет вызываться с параметрами, которые вы передадите при вызове click, и контекст в onDeleteHandler будет ссылаться на контекст откуда он вызывается, если вы не привязали onDeleteHandler с помощью функции стрелки или в конструкторе

Answer 2

Весь вопрос сводится к тому, какова разница между func и func() и () => func(). Это не имеет ничего общего с React.

Если у меня есть функция

function func() {
  console.log(42);
}

Тогда я могу ссылаться на сам объект функции через func. Это полезно, если мне нужно передать функцию другой функции , например, setTimeout

setTimeout(func, 1000); // calls func after 1000ms

setTimeout ожидает функцию, которую она может вызвать после заданного времени ожидания.

Аналогично в React, click, change и т. Д. - это все реквизиты, которые ожидают, что им будет передана функция, которая вызывается при возникновении события.

---

func() с другой стороны вызывает функцию . Это необходимо сделать, если вам действительно нужно вызвать функцию прямо тогда и там. Это означает, что если я сделаю

setTimeout(func(), 1000);

тогда я бы сначала позвонил func и передал бы его возвращаемое значение в setTimeout (то есть I позвонил бы func сейчас, setTimeout не вызывает его позже ). Так что это обычно неверно , если func не возвращает саму функцию, и это действительно возвращаемое значение, которое я хочу передать другой функции.

---

() => func() - это просто новая функция, которая вызывает только func. Для всех намерений и целей это эквивалентно func:

function func() {
  console.log(42);
}

const anotherFunc = () => func();

func();
anotherFunc();

И, конечно, если func ожидает аргумент, я должен передать его при переносе в другую функцию, что и делает x => func(x).

---

Другая часть - это то, как работают функции, назначенные свойствам объекта и this. Короче говоря, то, на что this ссылается внутри функции (без стрелки), зависит от того, как функция называется . Делая

this.foo();
// or
var bar = this.foo;
bar();

дает два разных результата, потому что this.foo() и bar() - это два разных способа вызова функции. Для получения дополнительной информации см. Как получить доступ к правильному `this` внутри обратного вызова?

Answer 3

<Char click={()=>this.onDeleteHandler(index)}/>

Он передает анонимную функцию в качестве обратного вызова, который - при нажатии - запускает onDeleteHandler с дополнительным параметром index (который должен быть определен в области видимости ранее).

<Char click={this.onDeleteHandler()}/>

Он передает результат onDeleteHandler() как обратный вызов - вероятно, это плохая идея - onDeleteHandler функция должна возвращать другую функцию, которая будет вызываться при нажатии.

<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />

Выглядит неверно - приведет к синтаксической ошибке.

<Char click={this.onDeleteHandler}/>

Аналогичен первому примеру, но не принимает пользовательских параметров. Событие щелчка по умолчанию будет передано в качестве первого аргумента для onDeleteHandler