函数名称调用（es6）之后何时使用括号

Question

我想知道为什么某些函数调用可以不加括号吗？您如何知道何时在函数名称后不使用括号是合适的？请参见下面的示例。为什么第三行不起作用？

onClick={this.validate} // why does function work here without parentheses?
onKeyPress={e => e.key === 'Enter' && this.validate()} // works
onKeyPress={e => e.key === 'Enter' && this.validate} // doesn't work

Answer 1

onClick是一个具有功能的属性-幕后，React在收到<some-element onClick={someFunction}/>时会保存someFunction供以后使用（注意，它不会 call < / em>函数），然后在用户点击时然后调用该函数。请注意，如果您觉得更合理，则可以将其重写为<some-element onClick={(...args) => someFunction(...args)}/>。

现在，当用户按下存在onKeyPress={e => e.key === 'Enter' && this.validate()}的元素时会发生以下情况：

1. 函数e => e.key === 'Enter' && this.validate()被调用
2. e.key === 'Enter' && this.validate()得到评估
3. e.key === 'Enter'被评估。如果计算结果为true，则：
4. this.validate()被调用并评估为布尔值

请注意，它与编写onKeyPress={e => e.key === 'Enter' && this.validate}时相比有何不同：

1. 函数e => e.key === 'Enter' && this.validate被调用
2. e.key === 'Enter' && this.validate得到评估
3. e.key === 'Enter'被评估。如果计算结果为true，则：
4. this.validate被评估为布尔值。如果函数存在，则将其强制转换为布尔值true，否则this.validate的计算结果为undefined，将其强制转换为布尔值false。请注意，this.validate 没有被调用。我认为这是一个错误，除非您明确希望这种行为发生。