javascript - 两个不可变列表——如何使三重相等起作用？

Question

假设我们有一个使用 Facebook 的伟大 Immutable.js 创建的不可变对象(immutable对象).我想比较使用 .map 或 .filter 从单一来源生成的两个列表，并确保它们相等。在我看来，当您使用 map/filter 时，您正在创建一个与先前对象无关的新对象。如何使三重相等 === 起作用？这有什么意义吗？

var list = Immutable.List([ 1, 2, 3 ]);
var list1 = list.map(function(item) { return item; })
var list2 = list.map(function(item) { return item; })

console.log("LIST1 =", list1.toJS())      // [1, 2, 3]
console.log("LIST2 =", list2.toJS())      // [1, 2, 3]
console.log("EQUAL ===?", list1===list2); // false! Why? How?

你可以在这里玩:http://jsfiddle.net/eo4v1npf/1/

上下文

我正在使用 React + Redux 构建应用程序。我的州有一个列表，其中包含具有属性 selected 的项目:

items: [
    {id: 1, selected: true},
    {id: 2, selected: false},
    {id: 3, selected: false},
    {id: 4, selected: true}
]

我只想将选定的 ID 传递给另一个容器，所以我尝试使用简单的connect:

function getSelectedIds(items) {
    return items
        .filter((item) => item.get("selected"))
        .map((item) =>  item.get("id"));
}

export default connect(
    (state: any) => ({
        ids: getSelectedIds(state.get("items"))
})
)(SomePlainComponent);

问题是，如果我设置额外的属性:

{id: 1, selected: true, note: "The force is strong with this one"}

这会导致状态改变和 SomePlainComponent 重新呈现，尽管所选 ID 的列表完全相同。如何确保纯渲染器正常工作？

编辑一些额外的信息

对于 React 纯渲染，我使用了来自 react-pure-render 的 mixin :

export default function shouldPureComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) ||
           !shallowEqual(this.state, nextState);
}

由于它不知道 props 可能是不可变的，因此它们被视为已更改，即

this.props = {
    ids: ImmutableList1
}

nextProps = {
    ids: ImmutableList2
}

虽然这两个属性ids在内容上是相等的，但它们是完全不同的对象，没有通过ImmutableList1 === ImmutableList2测试和shouldComponentUpdate返回 true。 @Gavriel 正确地指出深度平等会有所帮助，但这应该是最后的手段。

无论如何，我将只应用公认的解决方案，问题就会得到解决，谢谢大家! ;)

Answer 1

由于 Immutable.js 对象本质上是唯一的，因此您永远无法实现不可变结构的严格相等。

您可以使用 .is 函数，它接受两个不可变对象(immutable对象)并比较它们中的值。这是可行的，因为不可变结构实现了 equals 和 hashCode。

var map1 = Immutable.Map({a:1, b:1, c:1});
var map2 = Immutable.Map({a:1, b:1, c:1});
console.log(Immutable.is(map1, map2));
// true