ImmutableJS如何与Angular 2一起工作？

Question

我已经在Angular 2上使用ImmutableJS有一段时间了，因为它在变化检测方面的性能优势。看这里。

然而，我不太清楚，为什么Immutable在默认情况下与Angular 2一起工作。当没有显式数组时，它如何知道如何迭代值并显示它们？它是否每次访问集合的值时都调用toJS（）？它实现了Angular 2自动调用的某种方法吗？

如果是这样的话，有没有一种方法可以定义您自己的集合来实现这个方法？

例如：

Component({
    selector: 'list',
    template: '<ul><li *ngFor="#item of items">{{ item.id }}</li></ul>',
    directives: [CORE_DIRECTIVES]
})
export class SiteComponent { 
    items: Immutable.List<Item>;
}

Answer 1

我不是Angular用户，但我认为很容易看到下面发生了什么：我假设

ngFor="#item of items"

转换为for... of循环的等效形式。此构造可用于迭代数组，但也可用于一般情况下的任何迭代。（是的，不可变。List正确实现可迭代协议）

一些优质资源：

SO上的可迭代协议：

检查某物是否合适

深度迭代协议：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols

最后：

如果您想100%确定，请创建一个简单的可写结构，但它既不是Array也不是不可变的。列表，因此Angular不知道如何迭代它，只能使用iterable协议（需要babel或新版本的node）：

'use strict'
let obj = {}
// obj is iterable with values 1, 2, 3
obj[Symbol.iterator] = function() {
  console.log('Yes, I am using the iterable protocol indeed')
  return [1, 2, 3][Symbol.iterator]()
}
for (let i of obj) {
  console.log(i)  // prints 1, 2, 3
}

现在，如果您使用此结构而不是不可变。列表，您可以很容易地看到调用了迭代器。