Question

我正在调试我的应用中的性能问题。每当Redux状态更改时，我的顶级组件App都会重新渲染，即使它的道具（来自Redux）具有相同的值。

它从Redux传递了2个道具，一个是字符串，一个是对象。

export default connect(state => ({
  name: state.name, // This is a string
  address: state.address // This is an object
}))(App);

是引起问题的address（对象）。我是否认为这是因为Redux的connect函数进行了浅比较，并认为address已更改为新对象，甚至认为值未更改？

假设这是正确的，我认为解决方案是使用重新选择模块来记忆address或使用shouldComponentUpdate（对我来说似乎更麻烦）。我是否正确，这是2种常规解决方案？

Answer 1

使用shouldComponentUpdate（对我来说似乎更麻烦）

实际上，React Redux已经做过internal shouldComponentUpdate，并且只做浅层相等检查。

因此在您的组件中复制它毫无用处。

可以记住地址，例如使用重新选择

这应该是您的解决方案，因为如果值相同，它可以确保connect将跳过重新渲染。

Answer 2

我同意您的评估，connect确实做了比较浅的比较，如果address对象是新对象，它将重新呈现。

我建议不要使用shouldComponentUpdate来解决此问题，因为它很容易导致错误，导致您的应用在需要时不会更新。

reselect在一般情况下是一个不错的选择，但是在您的情况下，还有另一个选择-您可以从address对象中提取mapStateToProps中的值：

export default connect(state => ({
  name: state.name, // This is a string
  city: state.address.city, // This is a string now
  street: state.address.street, 
  // etc. 
}))(App);

如果需要所有值，则可以散布address对象：

export default connect(state => ({
  name: state.name, // This is a string
  ...state.address,
}))(App);

Answer 3

据我所知，这总是返回一个新对象

export default connect(state => ({
 name: state.name, // This is a string
 address: state.address // This is an object
}))(App);

说您的redux状态会更新一些值，但不会更新名称或地址，redux会调用您应用中的所有 mapDispatchToProps 并返回一个新对象

在这种情况下，我建议使用重新选择功能，它确实可以解决性能问题。

希望有帮助

从React的Redux传递对象会导致不必要的渲染？

3 个答案: