redux中只有单个状态更改时如何防止其他组件重新渲染答案

【问题标题】：How to prevent other compnents re-rendering when only single state changed in reduxredux中只有单个状态更改时如何防止其他组件重新渲染
【发布时间】：2021-01-17 23:04:21
【问题描述】：

我使用 redux 作为状态管理创建了一个 react 项目。我有两个不同的状态存储在同一个减速器中，并由两个不同的组件使用。但是每次我改变一个组件的状态时，另一个组件也会重新渲染。如何防止这种渲染行为？

你可以在这里试试我的沙盒：https://pjm8e.csb.app/

我在每个组件中都放了一些console.log，当按钮点击时两者都会呈现

【问题讨论】：

您将整个状态映射到道具。为每个组件映射您想要的子集。如果这些子集不重叠，那么当该子集不变时，它们不应该重新渲染。
你能分享你的代码链接吗？

标签： javascript reactjs redux render

【解决方案1】：

这种情况正在发生，因为这两个组件都连接到整个状态。因此，如果您只更新一小部分状态，则会导致它们都重新呈现。您可以使用调度钩子和选择器仅连接到商店的相关部分。这是一个沙盒示例：

https://codesandbox.io/s/shy-architecture-1n0g7?file=/src/Consumer2.js

【讨论】：

有效！所以不需要使用redux中的connect()？
您可以使用connect 或挂钩。由于现在每个人都在使用钩子，我会推荐这种方法。如果您更喜欢连接，您仍然可以获得相同的结果，但您只需映射您mapStateToProps 中的状态子集