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

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 方法来检查旧道具或状态是否与新道具或状态相同。

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

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

Updating Records on ImmutableJS OrderedMap without losing reference

javascript

reactjs

reactjs-flux

immutable.js