React中connect包裹组件未接收更新props的原因咨询

这个问题的核心在于React（包括Redux的connect高阶组件）依赖浅比较来判断是否需要更新组件，而你的第一种传递方式没有改变data的对象引用，导致connect判定props未发生变化，进而不会将更新传递给内部的Sample组件。

让我拆解具体细节：

1. React与connect的浅比较逻辑 #

React组件（以及Redux的connect高阶组件）默认通过**浅比较（shallow equality check）**来决定是否触发重新渲染：

• 对于字符串、数字这类基本类型，直接比较值是否相等；
• 对于对象、数组这类引用类型，仅对比内存引用是否相同，不会深入检查对象内部的属性变化。

Redux的connect内部使用shallowEqual函数做对比，逻辑和React的浅完全一致——只要引用没变化，哪怕对象内容改了，也会被判定为“props无更新”。

2. 第一种传递方式的问题 #

当你直接在原data对象上添加属性时（比如执行data.c = 3，或是重新赋值但指向同一个对象），data的内存引用并没有改变，它还是指向内存里的同一个对象。此时父组件传递<Sample data={data} />时，connect接收到的props.data和之前的引用完全一致，浅比较会认为“props没变化”，因此不会触发内部Sample组件的重新渲染，自然也不会传递更新后的属性。

3. 为什么展开对象能解决问题 #

使用{ ...data }时，JavaScript会创建一个全新的对象引用——这个新对象复制了原data的所有属性，但在内存中是独立的。此时connect的浅比较会发现props.data的引用变了，判定“props已更新”，于是会重新渲染内部的Sample组件，并传递包含新属性的props。

更优的解决方案 #

除了传递时展开对象，更推荐遵循React的不可变数据原则，在更新数据时就创建新对象，而不是修改原对象：

// 不要直接修改原对象：data.c = 3
// 而是创建新对象
data = { ...data, c: 3 }

这样即使直接传递<Sample data={data} />，因为data的引用已经改变，connect也会正确触发Sample组件的更新，从根源上避免这类问题。

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