React组件props传参与解构默认值运行机制咨询

示例代码 #

父组件 #

<CarouselSlick 
    items={suffled || children}
    {...customFields}
    isSwipe={false}
    hideControlsMobile={false} 
/>

子组件 #

const CarouselSlick = (props) => {
  const {
    items = [],
    hideControlsMobile,
    isAutoPlay = false,
    isSwipe = true,
  } = props;
  // 组件逻辑...
}

Props传递优先级规则 #

父组件传值时遵循后写的同名属性覆盖前写的属性的规则：

• 最先写的items={suffled || children}，如果后续展开的customFields里存在items字段，会被customFields.items覆盖
• 展开customFields之后写的isSwipe={false}、hideControlsMobile={false}，会覆盖customFields里的同名字段，最终传给子组件的这两个值固定为false

解构默认值运行规则 #

ES6对象解构的默认值触发条件非常明确：只有当被解构的属性值严格等于undefined时，才会使用等号后定义的默认值，其余情况一律使用传入的原值，默认值不会生效，更不会覆盖传入的有效值。

问题1：items = []空数组默认值的作用 #

这是常见的兜底容错写法：

• 如果父组件调用时没传items，或者传的items值为undefined，子组件解构得到的items就是空数组[]，后续执行items.map、items.length等数组相关操作时，不会抛出Cannot read properties of undefined的类型错误
• 如果父组件传了items，哪怕传的是null、false、0这类假值，只要不是undefined，都会直接使用传入的值，空数组默认值不会生效
• 和无默认值写法const { items } = props相比，这种写法不需要额外写判空逻辑，代码更简洁。

问题2：isSwipe = true默认值不会覆盖父组件传入的false #

子组件写的isSwipe = true只是兜底默认值，完全不会覆盖父组件的传值：

• 父组件明确传入了isSwipe={false}，false是明确的布尔值，不等于undefined，所以解构时默认值true根本不会触发，子组件拿到的isSwipe就是父组件传的false
• 这个默认值的作用是适配其他调用场景：如果别的地方用CarouselSlick组件时没传isSwipe属性，组件会默认开启滑动功能，不需要每个调用方都手动写isSwipe={true}，降低组件使用成本
• 同理isAutoPlay = false也是一样的逻辑：没传的话默认不自动播放，传了就用传入的值。

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