javascript - 使用返回函数和调用函数有什么区别

Question

我有一些代码如下

var React = require('react');

var Controls = React.createClass({
propTypes: {
    countdownStatus: React.PropTypes.string.isRequired,
    onStatusChange: React.PropTypes.func.isRequired
},

onStatusChange(newStatus) {
    return ()=>{
        this.props.onStatusChange(newStatus);
    }
    // this.props.onStatusChange(newStatus);
},

render() {
    var {countdownStatus} = this.props;
    var renderStartStopButton = ()=>{
        if(countdownStatus == 'started') {
            return (
                <button className="button secondary"
                    onClick={this.onStatusChange('paused')}
                >Pause</button>
            )
        } else if(countdownStatus == 'paused') {
            return (
                <button className="button primary"
                    onClick={this.onStatusChange('started')}
                >Start</button>
            )
        }
    }

    return(
        <div className="controls">
            {renderStartStopButton()}
            <button className="button alert hollow"
                onClick={this.onStatusChange('stopped')}
            >Clear</button>
        </div>
    )
}
})

module.exports = Controls;

我的问题是在onStatusChange(newStatus)函数中，除了返回匿名函数之外，使用注释语句是错误的。但是我不知道返回函数和直接调用函数有什么区别。

谁能帮忙解释一下区别？非常感谢!

Answer 1

您也可以通过将 onStatusChange(newStatus) 更改为箭头函数来直接调用它。

onStatusChange => (newStatus) {
  this.props.onStatusChange(newStatus);
}

<button className="button secondary"
   onClick={() => this.onStatusChange('paused')}
 >Pause</button>

或通过

<button className="button alert hollow"
   onClick={this.onStatusChange.bind(this,'stopped')}
 >Clear</button>

原因是箭头函数绑定(bind)了上下文，这里是绑定(bind) this 并传递参数列表中的任何内容。在第二个示例中，如果您不使用箭头函数，则必须将 this 与参数一起传递。