有和没有数组函数的回调的简单问题

Question

我有一个简单的问题困扰了我很长时间。所以谁能告诉我 onClick{()=> function()}} 和 onClick{function()} 有什么区别？有箭头函数和没有箭头函数有什么区别？这两个函数都是回调函数吗？

Answer 1

我相信你的意思更多 onClick={() => callback()} 和 onClick={callback} 之间的区别是什么（ 注意 sans ()）。如果你这样做 onClick={callback()} 那么回调将被立即调用并且 而不是 当点击发生时。

除了使用直接引用版本外，两者之间没有太大区别也会通过onClick 事件，但如果回调不接受任何参数，则这不是问题。使用匿名函数可能会有更高的内存使用量（因为每个组件都会收到回调的副本）并且在构建副本时会受到一些 marginal 性能影响。

使用匿名回调函数允许传递其他参数

onClick={() => callback(customArg)}

或者你可以代理事件对象和传递其他参数

onClick={event => callback(event, customArg)}

您可以通过创建 curried 回调函数来实现与直接引用类似的效果。这允许您仍然传递额外的参数 and onClick 事件

const callback = customArg => event => {...}
...
onClick={callback(customArg)}

simple questions of callbacks with and without an array function