我们可以在Javascript解构时将变量的默认值设置为空箭头函数吗？

Question

我正在做一个 React 项目，遇到了这种情况。 在 JavaScript 中解构时可以为变量设置一个空箭头函数吗？ 这样做有什么缺点吗？

const { onClick = () => {} } = props;

Answer 1

如果 props 没有 onClick 键，则这样做会将空函数分配给 onClick。因此，虽然这是一种为 prop key 设置默认值的合法方法，但可能无法保证其存在，但您必须在应用程序的上下文中评估这样做的缺点。

Answer 2

在 general 中，没关系，如果您确实希望

onClick

成为一个不执行任何操作的函数（当它不存在于

props

上或具有值

undefined

时）。不过，特别是在 React 组件的上下文中：

• 大多数时候，您随后要传递

  onClick

  的组件会期望它可能会获得

  undefined

  的 function prop，因此默认它没有多大意义。
• 通过这样做，您每次都会创建一个 new 函数，这意味着您传递

  onClick

  的任何组件都会将其视为新值并且必须重新渲染，即使它已被记忆并且可以避免重新渲染- 如果

  onClick

  没有改变则渲染。在这种情况下，

  undefined

  将是更好的选择，因为它可以避免不必要的重新渲染。