时间戳

首页 > 解决方案 > 部分 redux 状态重新渲染（不必要的）整个反应组件

reactjs - 部分 redux 状态重新渲染（不必要的）整个反应组件

问题描述

我的 redux 状态部分（reducer）之一是filtersreducer，用于存储每页的过滤器设置。它是 key-object 结构，所以它看起来像这样：

{
   dashboard: {
     minDate: '2017-01-01',
     maxDate: '2019-01-01',
     //... other filters
   },
   otherPageKey: {
     //... other filters
   }
}

我的仪表板页面很大，但它包含select从 reducer: 读取的值filters.dashboard.minDate。负责连接的代码：

function mapStateToProps({
  filters
}) {
  return {
    filters: filters.dashboard
  };
}

现在 - 每当我们从该选择组件中选择新日期时，整个filters树都会更改，因此整个仪表板组件正在重新渲染。我怎么解决这个问题？预期的结果是，只有select属性被用户更改的组件才应该重新渲染。

标签： reactjsreduxrendering

解决方案

更多代码会有所帮助，但这通常是由父组件（在本例中为仪表板）检测到的状态或道具引起的。

这可能是由几件事引起的。

  • 您正在映射到父组件而不是特定的子组件。这意味着父组件正在检测更改并因此重新渲染。您是否mapStateToProps在仪表板组件中，而不是仅在您的选择组件中？
  • connect或的不当使用mapDispatchToProps。查看这篇文章了解更多信息。

同样，更多代码会有所帮助，但我希望这会有所帮助。

推荐阅读