当状态发生变化时，防止react-redux重新呈现整个页面

Question

我正在阅读几篇关于如何防止react-redux重新渲染整个页面的文章，只有一件小事发生变化。 一篇文章建议不要将所有包装成一个大container （如图1所示），而是将所有container包装成较小的containers （如图2所示）。 如果Container 2某些内容发生更改，则只会重新呈现Component 2和Component 3 。 Component 1不会重新渲染。

图1

Figure2

我有以下问题：

• 如果我将所有东西都包装在较小的容器中，我需要“几个”全局状态，每个container一个（如图中底部的伪代码所示）。 这是常见做法吗？
• 如果可以拥有“几个”全局状态，并且我需要在Container1中的Container2某个属性中，我需要将其与两个全局状态连接。 对我而言，感觉它可能会很快变得混乱。 什么来自哪里？
• 我何时何地使用react方法shouldComponentUpdate() ？ 使用Big Container方法，我将如何区分应该重新呈现哪个Component ？！ 如果在Components实现，它们将不再“转储”，因为它们需要访问全局状态以决定是否重新渲染。 我无法重用Components因为每个Component在重新渲染时都有自己的特殊情况，何时没有。 我不知道在何时何地使用shouldComponentUpdate()

请注意，我对此很新，可能做出了错误的假设等。我基本上想知道如何只需要更新一件事就不能重新渲染整个页面。 询问谷歌的结果差异很大。

Answer 1

你的第二种方法是要走的路，尽管你对全球状态的定义有点误导。 基本上，你想拥有一个“全球状态”。 这就是所谓的“商店”。 需要接收商店部件的所有组件都使用react-redux' connect功能连接到它。

现在， connect(...)实际上是一个HOC，它包装你的组件并只将商店的已定义部分传递给它。 这样，组件（及其子组件）仅在其定义的道具发生变化时才重新渲染。

不要害怕更频繁地使用connect（）。 您只需要小心传递给容器的商店的哪些部分，这正是性能可能成为问题的地方。

这应该回答你的第一个问题。 第二个是设计问题。 根据您的应用程序设计，也可以根据数据源的结构进行设计。 如前所述，您希望将最少的道具传递给组件，以便在商店的其他部分发生更改时不会重新呈现。

对于第三个问题，您首先必须了解“哑组件”当然可以从其父组件/容器接收道具。 哑巴只是意味着他们无法决定是否应该重新渲染。 哑组件可用于显示/显示数据，就是这样。

假设你有一个非常简单的商店：

const store = {
  posts: {
    all: [],
    isFetching: false,
    err: {},
  }
}

然后将容器连接到它，如下所示：

function mapStateToProps(store) {
  return {
    posts: store.posts.all,
    isFetching: store.posts.isFetching,
    err: store.posts.err,
  };
}
@connect(mapStateToProps)

这个容器有三个可以使用的哑组件：

1. 一个帖子组件，它接收所有帖子并使用另一个愚蠢的孩子显示它们（pseudoCode，你明白了）：

     function posts = (posts) => { posts.map((post, id) => ( <otherDumbComponent post={post} key={id} /> )); } 

2. isFetching只显示一个微调器

3. 一个显示错误，如果有的话。

现在，如果只有isFetching已经改变，那么只有第二个组件会重新渲染，就是这样。 哦，和shouldComponentUpdate()是你可能不想使用的东西，因为，好吧..有很多关于它的好博客文章 。