реагировать на изменение функций стрелками ES6 или нет - PullRequest
Новая
       32

реагировать на изменение функций стрелками ES6 или нет

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

При обработке события onChange это работает 

<input type="file" onChange={this.onChange}

Не это, которое мгновенно выполняет функцию 

<input type="file" onChange={this.onChange()}

Не это другое, не выполняется 

<input type="file" onChange={() => this.onChange}

Но этот делает 

<input type="file" onChange={() => this.onChange()}

Но, в то время как первый автоматически отправляет объект event , второму требуется его расшифровка 

<input type="file" onChange={(e) => this.onChange(e)}
onChange(e) {
    console.log(e.target.files[0])
}

Почему это?и когда мы должны использовать один или другой?

Ответы [ 2 ]

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

С onChange={(e) => this.onChange(e)} вы, по сути, создаете новую функцию, которая вызывает метод this.onChange во время каждого рендеринга.

С onChange={this.onChange} вы получаете прямой доступ к this.onChange метод.Этот метод определяется только один раз и используется несколько раз.По сути, вы избегаете создания новой функции с новым рендером, что дает приложению небольшое повышение производительности

0 голосов
/ 19 сентября 2018 
<input type="file" onChange={this.onChange}

Это работает, потому что onChange prop - это функция, тогда вы передаете ссылку на функцию, и она работает.И <input> отвечает за передачу ему параметра события. 

<input type="file" onChange={this.onChange()}

Это не работает, потому что вы присваиваете onChange значение результата функции onChange.(Но в зависимости от вашей функции это может работать) 

<input type="file" onChange={() => this.onChange}

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

<input type="file" onChange={() => this.onChange()}

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

<input type="file" onChange={(e) => this.onChange(e)}
onChange(e) {
    console.log(e.target.files[0])
}

Это решает мою предыдущую мысль: теперь в вашей анонимной функции вы получаете информацию о событии e, и выпередавая его вашей функции onChange.Тогда это работает.

...