Upload
hoang-long
View
529
Download
4
Embed Size (px)
Citation preview
HTML DOM● Document Object Model● Constructed by browser when page is loaded● JavaScript gets all the power to create dynamic HTML
5
HTML DOM● Document Object Model● Constructed by browser when page is loaded● JavaScript gets all the power to create dynamic HTML
6http://www.w3schools.com/js/js_htmldom.asp
Virtual DOM● Pure JavaScript (JavaScript Object)● render() to create real DOM● Modify real DOM when something changes
7
90's webpage
13
Full-page refresh
Virtual DOMRe-render
Do not mutate
Data is guaranteed to be updated
90's webpage
14
Full-page refresh
Virtual DOMRe-render
Do not mutate
SLOW FAST
Data is guaranteed to be updated
When we were “children”
17
With Version Control
What we’ve done--- with a project named “BreakOut”
BreakOutVer1
BreakOutVer2
BreakOutVer3
BreakOutFinal
BreakOutFinal2
DIFF ALGORITHM
Generate a list of DOM mutationO(n)
http://facebook.github.io/react/docs/reconciliation.html
18
Re-rendering process1. Build new virtual DOM subtree2. Diff with the old one3. Compute the minimal set of DOM mutations4. Batch execute all update
19
React thinkingNo controllers
No modelsNo directives
No global event listeners...
Everything is component
29
Everything is component
31
FilterableProductTable
SearchBar
ProductTable
ProductCategoryRow
ProductRow
https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html