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

Question

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

图1

图2

我有以下问题:

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

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

Answer 1

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

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

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

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

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

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

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)

这个容器有三个可以使用的dumb组件:

1. 一个帖子组件，它接收所有帖子并使用另一个愚蠢的 child (伪代码，你明白了)显示它们:

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

2. 一个在抓取时只显示一个微调器

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

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