JavaScript解构赋值时能否给变量设空箭头函数为默认值？

是否可行？ #

完全可行。JavaScript允许将函数（包括箭头函数）作为解构赋值的默认值。像你写的const { onClick = () => {} } = props;这段代码，当props中没有onClick属性，或者onClick的值为undefined时，变量onClick会被赋值为这个空箭头函数。这么做的直接好处是，后续调用onClick()时不会抛出Cannot read property 'call' of undefined这类错误，省去了每次调用前都要判断onClick是否存在的麻烦。

存在的弊端 #

• 触发不必要的React组件重渲染：每次执行解构时，都会创建一个新的空箭头函数实例。如果把这个onClick作为props传递给子组件，即使子组件用React.memo做了浅比较优化，也会因为函数引用每次都不一样，导致子组件频繁重渲染，影响性能。
• 调试难度提升：当用户触发点击操作却没有任何反应时，你很难快速判断是因为父组件没传入有效的onClick逻辑，还是传入的逻辑本身有问题——空函数会掩盖“未传入回调”这个事实，增加排查问题的时间。
• 语义不够清晰：空函数作为默认值，容易让其他开发者误解为“这个点击事件有默认行为”，但实际上它什么都不做。相比之下，显式在调用时判断onClick?.()或者在父组件明确处理未传入的情况，代码的可读性和意图会更明确。

内容的提问来源于stack exchange，提问作者Kuldeep Singh