ImmutableJS 更新列表

Question

这段代码工作的原因是什么

  return state.update(action.id, function(item) {
    return {id: item.id, title: item.title, duration: item.duration - 1 };
  });

而这个不工作？

  return state.update(action.id, function(item) {
    item.duration = item.duration - 1;
    return item;
  });

主要区别是什么？

Answer 1

ImmitableJS 的 List 不是“完全不可变的”。 item 是一个参考。为了让您在此操作之后得到一个新的 List 引用（并且您的 React 组件知道发生了一些变化），List 引用本身需要改变，而不仅仅是 items 引用的对象内的数据。

您的第一个示例有效的原因是您从列表中删除了一个引用并添加了一个新引用，这意味着您获得了一个新列表（不同的引用）。

第二个例子不会改变引用本身，只是对象中的数据，因此您不会获得新的 List 引用。

您可以通过执行Immutable.fromJS() 来初始化此列表以获取您的初始列表实例。这将创建一个“深度不可变”列表，其行为与您在第二个示例中所期望的一样。

试试这个 (here's the fiddle for it)：

var list = Immutable.List([ {id: 1}, {id: 2}, {id: 3} ]);

var deepList = Immutable.fromJS([ {id: 1}, {id: 2}, {id: 3} ]);

var mutatedList1 = list.update(0, function(item) {
    item.id = 'x';
    return item;
});

var mutatedList2 = list.update(0, function(item) {
    return {id: 'x' };
});

var mutatedList3 = deepList.update(0, function(item) {
    return {id: 'x' };
});


console.log(list.get(0), mutatedList1.get(0), list.get(0) === mutatedList1.get(0), list === mutatedList1);
console.log(list.get(0), mutatedList2.get(0), list === mutatedList2);
console.log(deepList === mutatedList3);

有了这个输出：

Object {id: "x"} Object {id: "x"} true true
Object {id: "x"} Object {id: "x"} false
false

要让 React 知道您的列表已更改，比较必须是 false。