在ImmutableJS OrderedMap上更新記錄而不會丟失引用

我使用ImmutableJS OrderedMap將ImmutableJS記錄存儲在React應用程序中。我想知道處理共享相同值的更新的慣用方式是不會失去對Record的引用。例如，假設下面的代碼是什麼，是更新在關鍵1 fooBars對象，如果記錄在關鍵1更新保持完全相同的值在關鍵1.在ImmutableJS OrderedMap上更新記錄而不會丟失引用

import Immutable from 'immutable'; 

let fooBars = Immutable.OrderedMap(); 
let FooBar = Immutable.Record({id: undefined}); 
let fooBar1 = new FooBar({id: 1}); 
let fooBar2 = new FooBar({id: 1}); 

fooBars = fooBars.set(fooBar1.id, fooBar1); 
// this will lose reference to fooBar1 despite the values not changing 
// and cause the DOM to reconcile forcing a re-render of the component 
fooBars = fooBars.update(fooBar2.id, fooBar2);

來源

2015-05-12 evkline

您當前記錄的正確方法正在更新它正確的方式。

需要記住的是，每一個不可變的變異行爲都會產生一個全新的對象。

所以，從你的例子：

fooBars = fooBars.set(fooBar1.id, fooBar1); 
fooBars2 = fooBars.update(fooBar2.id, fooBar2);

你現在有兩個對象，fooBars1和fooBars2。它們是完全不同的javascript對象，所以fooBars1 !== fooBars2。但是，它們是相同的不可變對象，所以Immutable.is(fooBars1, fooBars2) === true。

因此，爲了防止重新渲染髮生，您必須點擊任何組件shouldComponentUpdate方法來檢查舊道具或狀態是否與新道具或狀態相同。

shouldComponentUpdate(nextProps){ 
    return !Immutable.is(this.props.fooBars, next.props.fooBars); 
}

來源

2015-05-12 19:39:14 Crob

這是1解決方案，但這會使shouldComponentUpdate減慢約3倍。 shouldComponentUpdate方法運行很多，這將是一個非常大的性能影響。 – evkline

如果你不想做這個檢查，那麼不要換出基礎記錄。因爲fooBar1！== fooBar2，將key 1中的值從fooBar1更改爲fooBarN永遠不會導致相同的Immutable。如果不是交換記錄，而是更新它們，您將取回原始對象，您可以使用===或pureRenderMixin。 fooBars.updateIn（[1，「id」]，function（）{return 1}）=== fooBars – Crob

好主意！謝謝！ – evkline

在ImmutableJS OrderedMap上更新記錄而不會丟失引用

回答

相關問題