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

【问题标题】：onClick={() => functionHere} vs onClick={functionHere}onClick={() => functionHere} vs onClick={functionHere}
【发布时间】：2020-12-06 02:33:36
【问题描述】：

快速提问：两者的主要区别是什么：

onClick = {() => functionHere}

和：

onClick = {functionHere}

我真的很困惑，因为有时() => 可以工作，有时我需要删除它，然后就可以单独使用functionHere。非常感谢！

编辑

函数这里是这样的：

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

【问题讨论】：

那么什么是functionHere，它是对函数的引用吗？还是运营？

标签： javascript

【解决方案1】：

我相信这只是用文字来思考你在做什么的问题。

这样想：functionHere 与 functionHere()。有什么区别？没有括号，它是一个函数的 reference，而 WITH 括号它是一个函数 executor。

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

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

将引用直接传递到onClickworks，因为它被构建为在函数传递给它的任何地方运行。所以传递一个引用总是有效的，传递一个返回引用的函数则不行。看到了吗？

另外如果您不需要控制传递哪些道具，只需使用参考即可。如果你想对道具有一些控制，请使用箭头函数(name) => functionHere(name)

【讨论】：

【解决方案2】：

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

当您没有执行它时，应该会在您将值分配给没有键的对象时引发语法错误。

为了避免不必要的函数执行，你应该只写

onClick = {functionHere}

请注意，这是有效的，因为 ES6 中引入了速记文字符号，这使得它等同于

onClick = {funcitonHere: functionHere}

您应该查看MDN docs on arrow functions

【讨论】：