2

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

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

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 个正常的解决方案？

4

3 回答 3

1

使用 shouldComponentUpdate （这对我来说似乎更混乱）

实际上，React Redux 已经做了一个内部shouldComponentUpdate的并且只做浅层的相等检查。

所以在你的组件中复制它是没有价值的。

要么记住地址，例如使用重新选择

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

于 2019-10-31T13:34:52.450 回答
0

我同意您的评估，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);
于 2019-10-31T13:16:35.880 回答
-1

据我了解，这总是返回一个新对象

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

假设您的 redux 状态更新了一些值，但没有更新名称或地址，redux 将调用您的 App 中的所有mapDispatchToProps并返回一个新对象

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

希望能帮助到你

于 2019-10-31T13:16:19.517 回答