Question

我使用ImmutableJS OrderedMap在React应用程序中存储ImmutableJS记录。我想知道处理共享相同值的更新的惯用方法是什么，而不会丢失对Record的引用。例如，给定以下代码，如果要在键1处更新的记录与键1处的当前记录保持相同的确切值，则更新键1处的fooBars对象的正确方法是什么。

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);

Answer 1

您正在以正确的方式更新它。

要记住的是，对不可变的每个变异操作都会导致一个全新的对象。

所以，从你的例子：

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

您现在有2个对象，fooBars1和fooBars2。它们是完全不同的javascript对象，因此fooBars1 !== fooBars2。但是，它们是相同的不可变对象，因此Immutable.is(fooBars1, fooBars2) === true。

因此，为了防止重新呈现，您必须使用任何组件shouldComponentUpdate方法来检查旧的prop或state是否与新的prop或state相同。

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

在不丢失引用的情况下更新ImmutableJS OrderedMap上的记录

1 个答案: