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

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 参数以避免docs 中提到的重新渲染。

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

更新： 除了@tmdesign 的答案，如果我创建A 的子组件，那么childA 中的一些更新会导致A 和childA 重新渲染，childA 重新渲染两次，因为两者都是连接普通reducer函数。

看，@tmdesign 的沙盒link，

Answer 1

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

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

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

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

试一试，您会发现组件已经仅在它们关心的 redux 状态更新时才智能地重新渲染——而不是在商店的任何部分更新时.

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

很酷吧？

Answer 2

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

人物状态

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

人员操作 PERSONS_FETCH_INITPERSONS_FETCH_SUCCESSPERSONS_FETCH_FAIL

另外你还需要使用 react memo，如果组件 A 的订阅状态更新组件 A 将触发组件 App 的重新渲染，然后所有子组件（如 B、C 等）将重新渲染.