防止 react-redux 在状态更改时重新渲染整个页面答案

【问题标题】：Preventing react-redux from re-rendering whole page when state changes防止 react-redux 在状态更改时重新渲染整个页面
【发布时间】：2018-01-03 09:33:00
【问题描述】：

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

图1

图2

我有以下问题：

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

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

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案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)

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

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

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

在 isFetching 时只显示一个微调器
如果有一个则显示错误。

现在，如果只有 isFetching 发生了变化，那么只有第二个组件会重新渲染，仅此而已。哦，shouldComponentUpdate() 是您可能不想使用的东西，因为，嗯.. 有很多关于它的好 blog posts。

【讨论】：