时间戳

首页 > 解决方案 > 使用 react-redux 时如何高效设计组件/配置 store

reactjs - 使用 react-redux 时如何高效设计组件/配置 store

问题描述

如果我有这样的组件树，

//App.js
const App = () => (
      <React.Fragment>
        <A />
        <B />
        <C />
      </React.Fragment>
    )

//A.js
const A = () => (
      <React.Fragment>
        <ChildA />
      </React.Fragment>
)

现在，假设所有三个组件A, B,C都使用connect(). 问题是，如果我使用仅与 component 相关的数据更新 store A，那么B,C也将被重新渲染。一种可能的解决方案是配置options参数以避免重新渲染，如docs中所述。

为每个互斥组件创建多个减速器功能是否可以解决此问题？如果是，如何以及如果否，那么可以做些什么来减少不必要的重新渲染。

更新： 除了@tmdesign 的答案，如果我创建一个子组件A，那么一些更新childA会导致两者都A重新childA渲染，childA重新渲染两次，因为两者都连接到公共减速器功能。

看，@tmdesign 的沙盒链接，

标签： reactjsreduxreact-redux

解决方案

我对你的问题很感兴趣，并检查了几次，希望有人能回答，我可以更深入地了解它是如何工作的。但这并没有发生，所以我做了一些调查并设置了一个代码沙箱来准确说明您的要求。

https://codesandbox.io/s/spring-thunder-xbj5z

在那里你会发现一个简单的 React + Redux 应用程序，它包含 3 个组件（A、B 和 C），每个组件依赖于不同的 reducer（reducerA、reducerB 和 reducerC），并且能够触发更新其 reducer 的操作（actionA、actionB、和行动C)。

您会console.log在每个组件的 render 方法中看到一条语句，明确说明每个组件何时重新渲染。

试一试，你会发现组件已经智能地重新渲染，只有当他们关心的 redux 状态更新时——而不是商店的任何部分更新时。

换句话说，它实际上不像您建议的那样工作（“如果我使用仅与组件 A 相关的数据更新商店，那么 B、C 也将被重新渲染。”）。当然，这些其他组件可以通过多种方式重新渲染，但在这里最基本的示例中，它们不会。

酷吧？

推荐阅读