Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Introduction to ReactJS
Ähnlich wie Introduction to ReactJS (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Introduction to ReactJS
- 1. Introduction to ReactJS Dinh Hoang Long @dinhhoanglong91
- 2. ReactJS A Javascript library for building user interfaces 2
- 3. JUST THE UI V in MVC 3
- 4. VIRTUAL DOM Simpler programming model Better performance 4
- 5. HTML DOM ● Document Object Model ● Constructed by browser when page is loaded ● JavaScript gets all the power to create dynamic HTML 5
- 6. HTML DOM ● Document Object Model ● Constructed by browser when page is loaded ● JavaScript gets all the power to create dynamic HTML 6 http://www.w3schools.com/js/js_htmldom.asp
- 7. Virtual DOM ● Pure JavaScript (JavaScript Object) ● render() to create real DOM ● Modify real DOM when something changes 7
- 8. 8
- 9. 9 JSX = JS + XML
- 12. 90's webpage 12 Full-page refresh Virtual DOM Re-render Do not mutate
- 13. 90's webpage 13 Full-page refresh Virtual DOM Re-render Do not mutate Data is guaranteed to be updated
- 14. 90's webpage 14 Full-page refresh Virtual DOM Re-render Do not mutate SLOW FAST Data is guaranteed to be updated
- 15. 15 What make Virtual DOM fast?
- 16. What make Virtual DOM fast? React: “Version control” of DOM 16
- 17. When we were “children” 17 With Version Control What we’ve done --- with a project named “BreakOut” BreakOutVer1 BreakOutVer2 BreakOutVer3 BreakOutFinal BreakOutFinal2
- 18. DIFF ALGORITHM Generate a list of DOM mutation O(n) http://facebook.github.io/react/docs/reconciliation.html 18
- 19. Re-rendering process 1. Build new virtual DOM subtree 2. Diff with the old one 3. Compute the minimal set of DOM mutations 4. Batch execute all update 19
- 20. 20 OLD NEW
- 21. 21 OLD NEW
- 22. 22 OLD NEW
- 23. 23 OLD NEW
- 24. 24 OLD NEW
- 25. 25 OLD NEW
- 27. ONE-WAY DATA BINDING Keep complexity under control 27
- 28. Traditional data flow Any component can communicate with other component 28
- 29. React thinking No controllers No models No directives No global event listeners ... Everything is component 29
- 30. Everything is component 30 https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
- 32. Component 32 state created within component mutable props passed in from parent immutable
- 36. Does data flow one way? 36
- 37. Does data flow one way? 37 Events flow up Data flows down
- 38. Does data flow one way? 38 Events flow up Data flows down
- 39. Events - Data Flow 39 send props request check
- 40. Batch update 40
- 41. Batch update 41 request check event callback
- 42. Batch update 42 request check event callback set state
- 43. Batch update 43 request check event callback set state
- 44. Summary V in MVC Virtual DOM One-way data binding 44