javascript - 如果 redux 更新了一个嵌套组件，但是 PureComponent 作为 prop 传递给它的父组件，PureComponent 会重新渲染吗？

Question

在 redux 中，如果您的 action/reducer 更新了 foo.bar 的值和您连接的组件的 mapStateToProps 是 (store) => { foo: store.foo } 然后将 foo={foo} 传递给 PureComponent child 。当 foo.bar 更改时， child 不会重新呈现？这就是为什么他们建议尽可能保持平坦？

感谢您的澄清。

Answer 1

有两个问题:

1. 通常，PureComponent 实例何时更新？
2. 此示例中的 PureComponent 组件实例是否正在更新？

问题 #1:PureComponent 对 shouldComponentUpdate 中的 props 进行了浅层比较。 this question 的答案中很好地描述了这意味着什么.总而言之，浅层比较检查引用的相等性而不是值的相等性。因此，如果 lastProps.myObj 和 nextProps.myObj 都是对同一对象的引用，浅比较的计算结果为 true，即使 lastProps.myObj.foo 和 nextProps.myObj.foo 不相等。

问题 #2:如果您更改了 state.foo，使其成为具有更改值的同一对象，那么浅层比较将返回假阴性。这里的复杂因素是您的示例使用 Redux。你说 Redux reducer 改变了 state.foo。第一个rules Redux reducers 的优点在于它们不会改变 state 或 props。他们返回一个新的状态。当 state 是一个对象时，他们会复制该对象并将更改应用于该副本。如果您遵守 reducer 契约并在不改变它的情况下更新状态，那么您已经更改了引用。在这种情况下，PureComponent.prototype.shouldComponentUpdate 应该返回 true。

// create an object
var foo = {bar: 'bar'};
// make a copy of the object 
var bar = Object.assign({}, foo); 
// both objects look the same, i.e. have the same property with an equal value 
foo.bar === bar.bar // -> true 
// but they are not the same object so the shallow comparison evaluates to false
foo === bar // -> false

因此，如果 state.foo 更改时 PureComponent 实例未更新，我将检查更改 foo 的 reducer 并确保更新不是突变。