React Redux重新整理單個對象屬性更改列表

我在包含多個對象的存儲中創建了一個列表（immutable.js）。該列表以包含行的表的形式顯示在組件中。這些行是顯示單個對象的子組件。這些對象的一個屬性應該是可編輯的。所以onChange（）我派遣一個動作，它應該改變那個特定對象的屬性。因爲我們永遠不會改變狀態，所以我只返回一個全新的列表，只改變單個對象。但是因爲整個列表是一個新的列表對象，所以表格組件每更改一次都會更新一次。這導致了一個非常緩慢的工作應用程序。React Redux重新整理單個對象屬性更改列表

我剛剛看了官方todo app example，並用Perf插件檢查了它。意識到他們也會在每次變更時重新列出整個待辦事項列表（標記爲已完成，未標記）。我該如何解決這個問題？

來源

2016-08-04 Marc

你的意思是「重建所有的DOM」或調用「渲染」方法？第二種情況是正常的，但virtualDOM知道他將退回的DOM元素 –

請顯示您的代碼。如果我們能看到你是如何做到這一點的話，幫助會容易得多。 – ajmajmajma

影響列表呈現性能的最大因素是繁重的渲染週期和昂貴的DOM變化。確保您的列表項在重新呈現時儘可能高效。如果做得好，這將會產生很大的變化。

你有幾個簡單的選項。

將你的行分成他們自己的組件（如果尚未完成的話）並優化渲染和更新週期。
使用類庫如react-virtualized來幫助列表/表/網格性能。

來源

2016-08-04 12:42:29 nsmarks

我的行是自己的組件，並且'@ connect'ed給商店。但Perf告訴我，connect（rowComponent）「組件」被重新渲染了x次，因此被浪費了。 – Marc

@Marc您需要優化這些組件的渲染週期以縮短更新週期。看看https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate – nsmarks

我知道，但我應該如何比較它們？父組件（表）由於列表現在是另一個對象而重新顯示。而且，如果表格會自行重新顯示，那麼connect（rowComponent）也會重新顯示。 rowComponent不會重新渲染，但connect（rowcomponent）和應用程序真的很滯後 – Marc

React Redux重新整理單個對象屬性更改列表

回答

相關問題