Javascript 防止react-redux在状态更改时重新呈现整个页面

我正在阅读几篇关于如何防止

react redux

在只有一点变化的情况下重新呈现整个页面的文章。 一篇文章建议，不要将所有内容包装到一个大的

容器中（如图1所示），而是将所有内容包装到更小的
容器中（如图2所示）。如果
容器2
中的某些内容发生更改，则只有
组件2
和
组件3
会重新渲染<代码>组件1
不会重新渲染

图1

图2

我有以下问题：


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


请注意，我对这一点非常陌生，可能做出了错误的假设等。我基本上想知道当只有一件事情需要更新时，如何不重新呈现整个页面。询问谷歌的结果差异很大
 你的第二种方法是正确的，尽管你对全球国家的定义有点误导。
基本上，你只想要一个“全球状态”。这就是所谓的“商店”。所有需要接收存储部分的组件都使用react-redux“
connect
功能连接到存储

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

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

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

对于第三个问题，您首先必须了解“哑组件”当然可以从其父组件/容器接收道具。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)

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

一个posts组件，它接收所有POST并使用另一个哑子级显示它们（伪代码，你明白了）：

函数posts=（posts）=>{
posts.map（（post，id）=>(
));
}

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

其中一个用于显示错误（如果有）
现在，如果仅isFetching已更改，则只有第二个组件将重新渲染，仅此而已。哦，
shouldComponentUpdate（）
可能是您不想使用的，因为。。它有很多优点

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