6. SPAGHETTI CODE? SAY NO
• Keep your component small.
• It’s contain display logic only. No AJAX, no heavy
computing data in component.
7. HANDLE UI
• It’s hard because there is so much state.
• Lots of UI elements, mutable DOM, user
input…
• Data change over time is a root of all problems.
8. HOW COMPONENT WORKS?
• Render to Element with initialState before insert to DOM.
• Component “react” when state change (on click, data
receive..).
• Re-render the whole component, then diff with old virtual
DOM.
• Apply the changed (attribute or DOM Node) to real
DOM.
9. • Re-render the whole component to make sure
that every place data is display correctly and to
be up-to-date.
• Re-render make things simple: no magical data
binding, no model dirty checking, no explicit
DOM operations…
• Is re-rendering expensive? No, thank to virtual
DOM.
10. VIRTUAL DOM
• Make re-rendering fast.
• Re-rendering make new virtual DOM, then diff
with old virtual DOM to find changed.
• Apply only changed to the real DOM.