防止當狀態發生變化時重新呈現整個頁面的反應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

回答

相關問題