Question

考虑示例：

<input type="text" onChange={this.name} />

在此示例中，name函数不包含括号，为什么？当我放括号时，它将引起错误。我想知道此错误的原因。

Answer 1

“不带花括号”功能是指向某些功能的指针。

这里是一个例子。

let bananas = function(){ console.log('bananas') }

执行此操作时，不调用函数，仅引用它，仅创建指向该函数的指针。有了该参考，您不仅可以在读取代码时，还可以随时调用bananas()。

之所以只在react中传递函数的引用，是因为在组件内部，某些地方它将调用该函数。

如果仅创建<input type="text" onChange={this.name()} />，则在渲染输入时会调用name()，但如果仅将引用传递给函数，则只有在事件（onChange）发生。

Answer 2

在JavaScript中，函数是一个对象，与其他对象非常相似。

您可以将函数分配给变量。

let foo = function () {
  return "bar"
}

然后您可以在该变量名称中添加括号以调用该函数。

foo() // Returns "bar".

您可以像其他变量一样传递变量，例如作为参数传递给另一个函数。

function baz (some_function) {
  return some_function()
}

baz(foo) // Returns "bar".

这就是您的示例中发生的情况。 this.name传递给处理onChange事件的函数，并在函数内部的某个点添加括号以评估传递的函数。

这就是为什么，如果在传递函数时添加括号，则会对函数求值，并传递结果：

baz(foo()) // Uncaught TypeError: some_function is not a function

在这里，foo()已经被求值，并且some_function中的变量baz包含字符串"bar"而不是函数。

Answer 3

在JavaScript中，函数是值。这意味着它可以在任何表达式上下文中使用，例如将值传递给函数或从函数返回。函数的值是它自己的名称。不要与函数的返回值混淆。

Parentheses是一个JavaScript运算符，用于在其他用例之间创建函数调用表达式。

在您的情况下，您正在为React的this.name元素的属性onChange传递值input。 onChange期望function value被调用以响应 change事件。这样，在这种情况下，React本身将为此使用括号运算符来调用该函数。

否则，如果您编写了this.name()，则说明您已经在进行函数调用，这将导致错误，因为您绕过了React的预期行为。