Angular2 Change Detection, Тимофей Яценко, MoscowJS 31

Post on 06-Jan-2017

225 views 9 download

Transcript of Angular2 Change Detection, Тимофей Яценко, MoscowJS 31

<parent prop1="exp1" prop2="exp2">

<child prop3="exp3" prop4="exp4"></child>

</parent>

<parent prop1="exp1" prop2="exp2">

<child prop3="exp3" prop4="exp4"></child>

</parent>

while (op) {

const getter = getterFor(op.fieldName);

const oldValue = op.value;

const newValue = getter(op.context);

if (oldValue !== newValue) {

op.value = newValue;

const fn = reactionFunctionFor(op);

fn(oldValue, newValue);

}

op = op.next;

}

<formatted-rating [rating]="talk.rating"/>

const talk = obj.talk;

const rating = talk.rating;

if (rating !== this.previousRating) {

this.previousRating = rating;

this.formattedRatingComponent.rating = rating;

}

<formatted-rating [rating]="talk.rating"/>

<formatted-rating [rating]="talk.rating"/>

class Talk_ChangeDetector {

//...

detectChanges() {

//...

const talk = obj.talk;

const rating = talk.rating;

if (rating !== this.previousRating) {

this.previousRating = rating;

this.formattedRatingComponent.rating = rating;

}

}

}

//code

a();

setTimeout(b, 0);

setTimeout(c, 0);

d();

//run order

a

d

b // async

c // async

b

c

//code

start();

a();

setTimeout(b, 0);

setTimeout(c, 0);

d();

stop();

// start

a

d

// stop

b // missed

c // missed

start();

a();

d();

end();

start();

b();

end();

start();

c();

end();

onZoneEnter();

a();

d();

onZoneLeave();

onZoneEnter();

b();

onZoneLeave();

onZoneEnter();

c();

onZoneLeave();

socket.on('data', (data) => {

model.data = data;

$scope.$apply();

});