onClick={() => functionHere} 与 onClick

Question

快速问题：以下之间的主要区别是什么：onClick = {() => functionHere}和：onClick = {functionHere}我真的很困惑，因为有时() =>可以工作，有时我需要将其删除，然后单独使用functionHere。多谢！编辑函数这里是这样的：const functionHere = () => {    console.log("called")    // some codes here}

Answer 1

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

想想这样：functionHerevs functionHere()。有什么不同？没有括号，它是对函数的引用，而有括号，它是函数执行器。

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

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

将引用直接传递到onClick工作中，因为它是为在函数传递给它的任何地方运行而构建的。因此传递引用总是有效的，而传递返回引用的函数则不行。看？

---

另外， 如果您不需要控制传递哪些道具，只需使用引用即可。如果您想对道具进行一些控制，请使用箭头功能(name) => functionHere(name)

Answer 2

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

由于您没有执行它，所以当您将值分配给没有键的对象时，应该会抛出语法错误。

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

onClick = {functionHere}

请注意，这是有效的，因为 ES6 中引入了简写文字表示法，这使得它相当于

onClick = {funcitonHere: functionHere}