React ES6语法。它是立即传递函数还是调用函数？

我下面的教程的Facebook和我有一个关于下面的代码问题：React ES6语法。它是立即传递函数还是调用函数？

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道具上发生了什么。什么是右边？它看起来像定义一个Javascript函数的ES6语法。但是我们是否将handleClick函数传递给它或调用它？ ES5中减少了什么？

是不是this.handleClick(i)立即调用函数，而不是传递它？

来源

2017-01-14 Jwan622

你读过[MDN约箭头函数的文档（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /功能/ Arrow_functions）？ –

this.handleClick(i) < - 立即调用。

() => this.handleClick(i) < - 是一个函数。 this.handleClick只会在调用包装函数时调用。以上可以在ES5被改写：

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

来源

2017-01-14 18:35:32 azium

不，你用这种方式创建了一个函数，但是你并没有在那个时候调用它。通过这种方式，创建的函数的上下文与它之外（this）保持一致。通过这种方式可以在里面叫this.handleclick，因为这是指外界情境

箭头功能不会创建自己的这一背景下，所以这从封闭的上下文了原有的意义。

从arrow funtion

来源

2017-01-14 18:35:07

如果一个函数体是一个语句，然后（用箭头语法时），你可以忽略它周围的{}。

() => this.handleClick(i)

等同于：

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

来源

2017-01-14 18:36:27 Quentin

React ES6语法。它是立即传递函数还是调用函数？

回答

相关问题