Question

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

如图一

Figure2

我有以下问题：

如果我把所有东西都装在较小的容器中，我需要＆＃34;几个＆＃34;全局状态，每个container一个（如图中底部的伪代码所示）。这是常见做法吗？
如果有几个＆＃34;几个＆＃34;全局状态，我需要Container1中Container2的某些属性，我需要将其与两个全局状态联系起来。对我而言，感觉它可能会很快变得混乱。什么来自哪里？
我何时何地使用react方法shouldComponentUpdate()？使用Big Container方法，我应该区别哪些Component应该被重新呈现？！如果在Components中实施，它们就不会是＆＃34; dump＆＃34;因为他们需要访问全局状态才能决定是否重新渲染。我无法重复使用Components，因为每个Component在重新渲染时都有自己的特殊情况，何时没有。我不知道在何时何地使用shouldComponentUpdate()

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

Answer 1

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

现在，connect(...)实际上是一个HOC，它包装您的组件并仅将商店的已定义部分传递给它。通过这种方式，组件（及其子组件）仅在其“＆＃39;定义道具改变。

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

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

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

让我们说你有一个非常简单的商店：

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)

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

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

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

在isFetching
如果有错误，则显示错误。

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

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

1 个答案: