如何在使用 react-redux 时有效地设计组件/配置存储

Question

如果我有一个组件树，

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

现在，假设所有三个组件A、B、C都使用connect()连接到存储。 问题是，如果我使用仅与组件A相关的数据更新存储，则B，C也将重新渲染。可能的解决方案之一是配置options参数以避免文档中提到的重新渲染。

为每个互斥组件创建多个化简器函数可以解决这个问题吗？如果是，如何以及如果否，那么可以做些什么来最大限度地减少不必要的重新渲染。

更新：除了@tmdesigned的答案之外，如果我创建一个A的子组件，那么childA中的一些更新会导致A和childA重新渲染，childA重新渲染两次，因为两者都连接到公共化简器函数。

请参阅@tmdesigned的沙盒链接，

Answer 1

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

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

在那里，你会发现一个简单的 React + Redux 应用程序，其中包含 3 个组件(A、B 和 C(，每个组件都依赖于不同的化简器(reducerA、reducerB 和 reducerC(，并能够触发更新其化简器的动作(actionA、actionB 和 actionC(。

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

稍微玩一下，你会发现组件只有在它们关心的 redux 状态更新时才已经智能地重新渲染 - 而不是在存储的任何部分更新时。

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

很酷吧？

Answer 2

在我看来，每个组件都需要有自己的功能，这对于防止像您所说的那样的情况很重要。例如，组件 A 呈现一个人员列表，它需要有自己的化简器和操作。例如：

人状态

persons: {
data: [...]
loading: false
error: null
}

人员行动PERSONS_FETCH_INITPERSONS_FETCH_SUCCESSPERSONS_FETCH_FAIL

此外，您还需要使用 react memo，如果组件 A 订阅的状态更新组件 A 将触发对组件 App 的重新渲染，然后所有子组件(如 B、C 等(将重新渲染。