Post on 18-Jul-2015
transcript
React re-renders entire component
whenever data changes
• 80s/90s — user input caused re-render of entire
web page. Why is this best?
• Immutable vs Mutable — mutations can cause
complexity to a point where an app is no longer
maintainable
“React components are idempotent functions.
They describe your UI at any point in time, just
like a server-rendered application.”
What does React do about
Mutable vs Immutable state?
• React isolates mutable state as much as possible.
• Re-rendering on every change makes things simple -
data is guaranteed to be up-to-date
• This is w/out magical data-binding, w/out model dirty
checking, and w/out explicit DOM operations
• Extra note: Why is dirty checking bad? It’s expensive
and as your application grows in complexity, it can
cause your code to get out of hand quickly
What is the v-DOM and how
does it work?
• The v-DOM is a virtualized representation of the
DOM at different points in time (before and after
state change)
• This virtualization is made up of lightweight
JavaScript objects that represent the DOM tree.
As such - it is inexpensive to store in memory and
allows the diffing algorithm to execute in
milliseconds
On every update…
• React builds a new v-DOM subtree
• diffs it with the old one
• computes the minimal set of DOM mutations and
puts them in queue
• and batch executes all updates
• React is fast because it computes minimal DOM
operations — the DOM is slow, JavaScript is
actually very, very fast
• React batches read/writes for optimal
performance automatically. It does this through
use of the v-DOM which is inherently faster than
the actual DOM.
Some other points of interest
• Automatic top-level event delegation with cross-
browser HTML5 events
• React also has a virtual event system in addition
to the v-DOM system
Web crawlers!
• One of the big drawbacks to single-page
applications that rely on user input is that web
crawlers can’t index them the same way they can
static pages
• React can generate a static HTML page and send
it down to the client, and then when render
component is called, it looks at the DOM - checks
with what was rendered on server... fast initial page
load experience and Google web-bots can crawl
“React can generate a static HTML page and
send it down to the client, and then when render
component is called, it looks at the DOM -
checks with what was rendered on server... fast
initial page load experience and Google web-
bots can crawl.”
What this means…
• You can generate a static html page and send it
down — something that can be crawled and
indexed
• Then, when JS boots up, it will replace DOM
elements as needed to boot up the UI
• Resulting in an indexable page that is fully built
on JavaScript
Let’s pause for a minute to note
some key takeaways so far
• Build components, not templates
• Re-render, don’t mutate
• V-DOM is simple and fast
As you build apps on React,
you will remove models• In most MV* JS frameworks, model is just a JS object
that allows you to know when something changes —
when data changes (enter two-way data-binding)
• Example:
• You have a model with Title and Subtitle. When something changes you manually
wire up the views to have a node change when the Title changes.
• You change the inner text on some node when the Title changes
• You have to wire this up yourself completely — in Backbone, you have to
wire both ways. In some other frameworks, you only have to wire one way,
but this is still a lot of code.
With React…
• You trigger a state change.
• Re-render happens.
• Diff happens in background automatically.
• View updates without any flashing in the DOM and
it happens very, very quickly.
• This shortens the amount of code you have to
write.
React can be most powerful
without models
• This does not mean you don’t have data structure
• You use the Flux design pattern (or coming soon,
the Relay framework)
• This is where stores come in…
Everything’s in Flux
• Centralized stores represent UI components
• The store is your source of truth for the data of
your application
• When you ask a store for data, if it doesn’t have
it, it fetches it and invokes your callback after it
gets it