ImmutableJS hoạt động như thế nào với Angular 2?

Question

Tôi đã sử dụng ImmutableJS với Angular 2 trong một thời gian, vì lợi ích hiệu suất của nó trong phát hiện thay đổi. Xem here.

Tuy nhiên, tôi không chắc lắm, tại sao Immutable hoạt động với Angular 2 theo mặc định. Làm cách nào để biết cách lặp lại các giá trị và hiển thị chúng, khi không có mảng rõ ràng? Nó chỉ gọi toJS() mỗi lần truy cập vào các giá trị của bộ sưu tập? Liệu nó có thực hiện một số loại phương pháp mà Angular 2 tự động gọi?

Và nếu có, có cách nào để xác định các bộ sưu tập của riêng bạn cũng triển khai phương pháp này không?

Một ví dụ:

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

Tôi không phải là một người sử dụng kiễu góc, nhưng tôi nghĩ nó khá dễ dàng để xem những gì sẽ xảy ra bên dưới: Tôi cho rằng

ngFor="#item of items" 

được chuyển thành một số tương đương với chu kỳ for..of. Cấu trúc này có thể được sử dụng để lặp qua các mảng, nhưng cũng có thể được sử dụng với bất kỳ lần lặp nào nói chung. (Và có, immutable.List thực hiện một cách chính xác giao thức iterable)

Một số nguồn lực tốt:

giao thức iterable trên SO:

Checking whether something is iterable

giao thức iterable sâu:

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

Cuối cùng:

Nếu bạn muốn chắc chắn 100%, tạo ra một cấu trúc đơn giản đó là iterable, nhưng nó không phải Array cũng không Immutable.List, vì vậy góc không thể biết làm thế nào để lặp nó nhưng sử dụng giao thức iterable (yêu cầu babel hoặc mới phiên bản 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 
} 

Giờ đây nếu bạn sử dụng cấu trúc này thay vì immutable.List, bạn có thể dễ dàng thấy rằng các iterator được gọi.