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

37

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

Page 1: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 2: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 3: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 4: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 5: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 6: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 7: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 8: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 9: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 10: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31

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

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

</parent>

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

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

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

</parent>

Page 12: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 13: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 14: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 15: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31

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"/>

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

const talk = obj.talk;

const rating = talk.rating;

if (rating !== this.previousRating) {

this.previousRating = rating;

this.formattedRatingComponent.rating = rating;

}

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

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

<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;

}

}

}

Page 18: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 19: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 20: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 21: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 22: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 23: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31

Page 24: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 25: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 26: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Page 27: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31

//code

a();

setTimeout(b, 0);

setTimeout(c, 0);

d();

//run order

a

d

b // async

c // async

b

c

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

//code

start();

a();

setTimeout(b, 0);

setTimeout(c, 0);

d();

stop();

// start

a

d

// stop

b // missed

c // missed

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

start();

a();

d();

end();

start();

b();

end();

start();

c();

end();

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

onZoneEnter();

a();

d();

onZoneLeave();

onZoneEnter();

b();

onZoneLeave();

onZoneEnter();

c();

onZoneLeave();

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

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

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

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

model.data = data;

$scope.$apply();

});

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