防止当状态发生变化时重新呈现整个页面的反应Reduce

我正在阅读几篇关于如何防止react-redux在只有一件小事情发生变化时重新呈现整个页面的文章。一篇文章指出，不是将所有东西都包装成一个大的container（如图1所示），而是将所有东西都包装成更小的containers（如图2所示）。如果Container 2中的内容发生变化，则只有Component 2和Component 3正在重新渲染。 Component 1不会重新呈现。防止当状态发生变化时重新呈现整个页面的反应Reduce

如图一

Figure2

我有以下问题：

如果我换在较小的容器的一切，我需要 “几个” 全局状态，每个container一个（如伪代码o所示在图的底部）。这是常见的做法吗？
如果可以拥有“几个”全局状态，并且我需要Container1在Container2中的一些属性，那么我需要将它与两个全局状态关联起来。对我来说，感觉它会很快变得凌乱。什么来自哪里？
何时何地使用react方法shouldComponentUpdate()？使用Big Container方法我将如何区分哪些Component应该重新渲染？如果在Components中实施，则它们不会“转储”了，因为它们需要访问全局状态以决定是否重新渲染。我无法重复使用Components，因为每个Component都有自己的特殊情况，何时重新提交，何时不重复。我不知道在哪里以及何时使用shouldComponentUpdate()

请注意，我相当的新本，并有可能作出错误的假设等。我基本上想知道如何不重新渲染整个页面，只有当有一件事需要更新。来自谷歌的结果差异很大。

来源

2017-07-27 Stophface

你的第二种方法是要走的路，尽管你对全局状态的定义有点误导。基本上，你想拥有一个“全局状态”。这就是所谓的“商店”。所有需要接收商店部分的组件都使用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)

而这个容器有三种愚蠢的组件也可以使用：

一个posts组件，它接收所有的帖子并使用另一个愚蠢的孩子显示它们（伪代码，你明白了吧）：
```
function posts = (posts) => { 
    posts.map((post, id) => (
    <otherDumbComponent post={post} key={id} /> 
    )); 
} 
```
之一，而isFetching
之一，如果有一个显示错误只显示一个微调。

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

来源

2017-07-28 09:57:18

防止当状态发生变化时重新呈现整个页面的反应Reduce

回答

相关问题