Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
•
0 likes•519 views
Команда разработчиков Angular2 провела огромную работу над Change Detector, он стал быстрым и "умным". В докладе рассмотрим две основные фазы Angular2 приложения, куда все таки делся $apply(), и почему Angular2 обещает быть фантастически быстрым (в сравнении с AngularJs).
Report
Share
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
- 10. <parent prop1="exp1" prop2="exp2"> <child prop3="exp3" prop4="exp4"></child> </parent>
- 11. <parent prop1="exp1" prop2="exp2"> <child prop3="exp3" prop4="exp4"></child> </parent>
- 15. 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"/>
- 16. const talk = obj.talk; const rating = talk.rating; if (rating !== this.previousRating) { this.previousRating = rating; this.formattedRatingComponent.rating = rating; } <formatted-rating [rating]="talk.rating"/>
- 17. <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; } } }
- 23. • • • • •
- 27. //code a(); setTimeout(b, 0); setTimeout(c, 0); d(); //run order a d b // async c // async b c
- 28. //code start(); a(); setTimeout(b, 0); setTimeout(c, 0); d(); stop(); // start a d // stop b // missed c // missed
- 31. • • • •
- 32. • • • •
- 34. socket.on('data', (data) => { model.data = data; $scope.$apply(); });