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中减少了什么？

Isn＆＃39; t this.handleClick(i)是否立即调用handleClick函数而不是传递它？

Answer 1

如果函数体是单个语句，那么（使用箭头语法时）可以省略它周围的{}。

() => this.handleClick(i)

相当于：

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

Answer 2

this.handleClick(i)＆lt; - 立即致电。

() => this.handleClick(i)＆lt; - 是一个函数。只有在调用包装函数时才会调用this.handleClick。以上内容可以在es5中重写：

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

Answer 3

不是你以这种方式创造了一个功能，但你并没有在那一刻打电话给它。以这种方式，创建的函数的上下文保持与它之外的相同（this）。通过这种方式你可以在里面调用this.handleclick，因为这引用了外部上下文

箭头函数不会创建自己的上下文，所以这有它的原始含义来自封闭的语境。

来自arrow funtion

React ES6语法。是通过函数还是立即调用函数？

3 个答案: