First knowledge of react

What is react?

React is now (2015) The hottest front-end technology.

In react, everything is a component.

A JavaScript Library for building user interfaces

React is just a JS library for building user interfaces (v in MVC), not a full mv* framework, so there is no comparability with angular, backbone, and Ember.

The days of using jquery to manipulate the DOM may become the past.

Features of react

(1) Just the UI

React is just v in MVC.

(2) Virtual DOM

React uses virtual DOM as a different implementation for superior performance. It can also be rendered by the service-side node. JS-without the need for excessive browser DOM support.

Virtual Dom (Virtual-dom) not only brings simple UI development logic, but also introduces the idea of component development, the so-called component, which is a packaged, individually functional UI component. React recommends a component-based rethinking of the UI composition, defining each module that is functionally independent on the UI as a component, and then building the overall UI by composing or nesting the small components into large components.

(3) Unidirectional data flow

REACT implements a one-way response data stream, which reduces duplicate code, which is why it is simpler than traditional data binding.

What the react is solving.

In web development, we need to manipulate the DOM in real time by reacting the changed data to the UI. Complex or frequent DOM operations are often the cause of performance bottlenecks (how high-performance complex DOM operations are often an important metric for measuring a front-end developer's skills). React introduced the virtual DOM mechanism for this purpose: a set of Dom APIs was implemented with JavaScript on the browser side. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM. And react can batch the refresh of the virtual DOM, the two data changes in an event loop are merged, for example, if you change the node contents from a to B successively, and then from B to A,react, the UI does not change, and if you control it manually, This logic is often extremely complex. Although it is necessary to construct a complete virtual DOM tree every time, because the virtual DOM is memory data, the performance is very high, and the actual DOM operation is only the diff part, so it can achieve the purpose of improving performance. In this way, while ensuring performance, developers will no longer need to focus on how changes to one or more specific DOM elements can be updated, but only to be concerned about how the entire interface is being render in any given state of the data.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

First knowledge of react