当 redux 中仅更改单个状态时如何防止其他组件重新渲染
How to prevent other compnents re-rendering when only single state changed in redux
我创建了一个使用 redux 作为状态管理的 React 项目。我有两个不同的状态存储在同一个减速器中,并由两个不同的组件使用。但是每次我改变一个组件的状态时,另一个组件也会重新渲染。如何防止这种渲染行为?
你可以在这里试试我的沙箱:https://pjm8e.csb.app/
我在每个组件中放了一些 console.log
,当按钮被点击时两者都会被渲染
这正在发生,因为两个组件都连接到整个状态。因此,如果您只更新状态的一小部分,则会导致它们都重新呈现。您可以使用挂钩进行调度和选择器,以仅连接到商店的相关部分。这是一个沙箱示例:
https://codesandbox.io/s/shy-architecture-1n0g7?file=/src/Consumer2.js
我创建了一个使用 redux 作为状态管理的 React 项目。我有两个不同的状态存储在同一个减速器中,并由两个不同的组件使用。但是每次我改变一个组件的状态时,另一个组件也会重新渲染。如何防止这种渲染行为?
你可以在这里试试我的沙箱:https://pjm8e.csb.app/
我在每个组件中放了一些 console.log
,当按钮被点击时两者都会被渲染
这正在发生,因为两个组件都连接到整个状态。因此,如果您只更新状态的一小部分,则会导致它们都重新呈现。您可以使用挂钩进行调度和选择器,以仅连接到商店的相关部分。这是一个沙箱示例:
https://codesandbox.io/s/shy-architecture-1n0g7?file=/src/Consumer2.js