Chapter 1 ■ GettinG Started
3
Single page applications are constantly fetching new data and transforming parts of the DOM as the
user interacts. As interfaces grow more complex, it gets more and more complicated to examine the current
state of the application and make the necessary punctual changes on the DOM to update it.
One technique used by many JavaScript frameworks (especially before React appeared) to tackle this
increasing complexity and keep the interface in sync with state is data binding, but this approach comes
with disadvantages in maintainability, scalability, and performance.
Reactive rendering is easier to use than traditional data binding. It lets us write in a declarative way how
components should look and behave. And when the data changes, React conceptually renders the whole
interface again.
Since its not viable for performance reasons to actually trash and re-render the entire interface every time
state data changes, React uses an in-memory, lightweight representation of the DOM called “virtual DOM.”
Manipulating the in-memory representation of the DOM is faster and more efficient than manipulating
the real DOM. When the state of the application changes (as the result of an user interaction or data fetching,
for example) React quickly compares the current state of the UI with the desired state and computes the
minimal set of real DOM mutations to achieve it. This makes React very fast and efficient. React apps can
easily run at 60fps, even on mobile devices.
Component-Oriented Development Using Pure JavaScript
In a React application, everything is made of components, which are self-contained, concern-specific
building blocks. Developing applications using components allows a “divide and conquer” approach where
no particular part needs to be especially complex. They are kept small and because they can be combined,
it’s easy to create complex and more feature-rich components made of smaller components.
React components are written in plain JavaScript, instead of template languages or the HTML directives
traditionally used for web application UIs. This is for a good reason: templates can be limiting because they
dictate the full set of abstractions that you are allowed to use to build your UI. React’s use of a full-featured
programming language to render views is a big advantage to the ability to build abstractions.
Additionally, by being self-contained and using a unifying markup with its corresponding view logic,
React components lead to a separation of concerns. In the early days of the Web, different languages were
created to force a separation of concerns: HTML for content structure, CSS for styling, and JavaScript for
behavior. This separation worked very well when it was introduced because the pervading style of web page
at the time was a static presentation. But now that interfaces are magnitudes more interactive and complex,
display logic and markup have inevitably become tied together; the separation between markup, styling, and
JavaScript turned into just a separation of technologies, not a separation of concerns.
React assumes that display logic and markup are highly cohesive; they both show the UI and encourage
the separation of concerns by creating discrete, well-encapsulated, and reusable components for each concern.
Flexible Abstraction of the Document Model
React has its own lightweight representation of the UI that abstracts away the underlying document model.
The most notable advantage of this approach is that it enables the use of the same principles to render HTML
for the Web as well as native iOS and Android views. This abstraction also leads to other interesting points:
• Events behave in a consistent, standards-compliant way in all browsers and devices,
automatically using delegation.
• React components can be rendered on the server for SEO and perceived
performance.
我的内容管理
展开
