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

Question

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

图1

图2

我有以下问题：

• 如果我将所有东西都包装在较小的容器中，我将需要“几个”全局状态，每个状态container（如图底部的伪代码所示）。这是普遍做法吗？
• 如果确定有“数”的全局状态，我会在一些财产需要从Container1在Container2，我需要连接这两个全球性的状态。对我来说，感觉它可能会很快变得混乱。什么是从哪里来的？
• 我将在何时何地使用该react方法shouldComponentUpdate()？使用这种Big Container方法我会如何不同，哪些Component应该重新渲染？！如果在 中实现Components，它们将不再“转储”，因为它们需要访问全局状态以决定是否重新渲染。我将无法重用，Components因为每个人Component都有自己的特殊情况，何时重新渲染，何时不重新渲染。我不确定何时何地使用shouldComponentUpdate()

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

Answer 1

你的第二种方法是要走的路，尽管你对全球国家的定义有点误导。基本上，您希望拥有一个“全局状态”。这就是所谓的“店”。所有需要接收部分存储的组件都使用react-redux'connect函数连接到它。

现在，connect(...)它实际上是一个 HOC，它包装您的组件并仅将存储的定义部分传递给它。这样，组件（及其子组件）仅在其定义的 props 更改时重新渲染。

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

这应该回答你的第一个问题。第二个是设计问题。根据您的应用程序的方式以及数据源的结构方式进行设计。如前所述，您希望将最少的 props 传递给组件，这样当商店的其他部分发生更改时它就不会重新渲染。

对于第三个问题，您首先必须了解“哑组件”当然可以从其父组件/容器接收 props。愚蠢只是意味着他们无法决定是否应该重新渲染。哑组件用于呈现/显示数据，仅此而已。

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

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. 一个帖子组件，它接收所有帖子并使用另一个愚蠢的子组件显示它们（伪代码，你明白了）：

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

2. 一个在 isFetching 时仅显示一个微调器

3. 如果有错误则显示一个。

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