onClick={() => functionHere} vs onClick={functionHere}

Question

简单问题:以下几个方面的主要区别是：

onClick = {() => functionHere}

以及：

onClick = {functionHere}

我真的很困惑，因为有时() =>可以工作，有时我需要删除它，并且只需要正确地使用functionHere。非常感谢!

编辑

functionHere是这样的：

const functionHere = () => {
    console.log("called")
    // some codes here
}

Answer 1

我相信这只是一个用语言思考你在做什么的问题。

想一想：functionHere对functionHere()。有什么关系？没有括号，它是对函数的引用，而带括号的则是函数执行器。

现在，就像@merlin说的那样，如果您执行这个() => functionHere操作，您将声明一个返回引用的函数，而不是一个执行器(无论如何，这不应该是非常常见的)。在这种情况下，onClick将无法工作，因为执行器不会被调用。

更常见的是这个() => functionHere()。这将返回执行器，这意味着当调用onClick事件时，functionHere将实际运行(因为执行器)。

将引用直接传递到onClick可以工作，因为它构建来运行任何传递给它的函数。因此，传递引用总是有效的，传递返回引用的函数无效。看到了吗？

，，如果您不需要控制传递给您的支持，只需使用引用即可。如果您想要控制道具，请使用箭头函数(name) => functionHere(name)。

Answer 2

() => functionHere在执行时返回函数functionHere，这意味着它与functionHere相同。

由于您没有执行它，所以在为没有键的对象分配值时，应该会引发语法错误。

为了避免不必要的函数执行，只需编写

onClick = {functionHere}

请注意，这是因为在ES6中引入了一个简写文字表示法，使其等价于

onClick = {funcitonHere: functionHere}

你应该检查一下关于箭头函数的MDN文档