Частая ошибка в React — это вызов функции во время рендера вместо того, чтобы передать ссылку на неё. Когда ты используешь скобки () после названия функции, ты сразу же выполняешь функцию вместо того, чтобы передать её как колбэк.
render() {
return <button onClick={this.handleClick()}>Click Me</button>
}
В этом примере handleClick() вызывается каждый раз, когда компонент рендерится, а не только когда кликнули на кнопку. Это вызывает:
render() {
return <button onClick={this.handleClick}>Click Me</button>
}
Если опустить скобки, ты передаёшь ссылку на саму функцию. React выполнит её только когда кликнули на кнопку.
Различие критично:
this.handleClick() — выполняет функцию сразу жеthis.handleClick — ссылается на функцию для последующего выполненияВсегда передавай ссылки на функции в обработчики событий без скобок, чтобы они выполнялись только когда произойдёт событие, а не при каждом рендере.
Использование onClick={this.handleClick()} выполнит функцию во время каждого цикла рендеринга, потому что скобки немедленно вызывают функцию.
Новый — ещё не проверен сообществом
Вы