Синтаксис React ES6. Передача функции или вызов функции немедленно?

Question

Я следую facebook учебнику и у меня есть вопрос о следующем коде:

handleClick(i) { 
    const squares = this.state.squares.slice(); 
    if (calculateWinner(squares) || squares[i]) { 
     return; 
    } 

    squares[i] = this.state.xIsNext ? 'X' : 'O'; 
    this.setState({ 
     squares: squares, 
     xIsNext: !this.state.xIsNext 
    }); 
    } 

    renderSquare(i) { 
    return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />; 
    } 

Где-то существует такой Square компонента, но не беспокойтесь об этом прямо сейчас. Мой вопрос заключается в том, что происходит в опоре onClick. Что на правой стороне? Это похоже на синтаксис ES6 для определения функции Javascript. Но передаем ли мы функцию handleClick или называем ее? С чем это связано с ES5?

Не является this.handleClick(i), который немедленно вызывает функцию handleClick и не передает ее?

Answer 1

this.handleClick(i) < - призывает немедленно.

() => this.handleClick(i) < - это функция. this.handleClick будет вызываться только при вызове функции обертки. Выше можно переписать в ES5:

(function() { this.handleClick(i) }).bind(this) 

Answer 2

Нет, вы создаете funtion таким образом, но вы не вызываете его в тот момент. Таким образом, контекст созданной функции остается таким же, как и вне его (это). Таким образом, вы можете вызвать this.handleclick внутри, потому что это относится к внешнему контексту

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

arrow funtion От

Answer 3

Если тело функции является один оператор, то (при использовании синтаксиса стрелка) можно опустить {} вокруг него.

() => this.handleClick(i) 

эквивалентно:

function() { this.handleClick(i); }.bind(this);