Good web programmer preliminary study of cognitive react framework of the road

　　Good web programmer preliminary study of cognitive react framework of the road, the origin and development React, at first le facebook, because involves a stuff called data flow, that in order to process the data stream and also to consider when building instagram (photo sharing) of good performance issues le, Facebook began a variety of front-end MVC framework on the market to carry out a study, however, did not fancy eye, so that Facebook, or develop their own one is the best, so they decided to put aside many so-called "best practices", to rethink the way to build a front-end interface, they developed their own set of really big cow creativity is still very strong.
The starting point React
based HTML front-end interface development is becoming increasingly complex, the basic nature of the problem can be attributed to how or from server-side dynamic data entered by the user to reflect on the efficiency of complex user interfaces. And React framework from Facebook it is facing the problem of a complete solution, according to the official website of the description, the starting point is: for large-scale application development data changing (Building large applications with data that changes over time). Compared to the traditional type of front-end development, React opened up a rather offbeat way to achieve high performance and high efficiency to develop front-end interface.
React relationship with the traditional MVC-
React is not a complete MVC frameworks, most can be considered in MVC V (View), even React downplayed the MVC development model;
React performance reflects: Virtual the DOM
React performance principle:
in Web development, we always need to change the data in real-time reaction to the UI, then they need to operate on the DOM. Complex or frequent DOM operations are often the cause of performance bottlenecks generated (how high performance complex DOM manipulation is often an important indicator of a front-end staff skills development).
React to this end the introduction of a mechanism for virtual DOM (Virtual DOM): In the browser with Javascript implements a set of DOM API. All are carried out when the DOM structure based React developed through the virtual DOM, whenever the data changes, React will rebuild the entire DOM tree, and DOM tree React the current and the last whole DOM tree by comparing DOM structure obtained difference, and only then you will need to change the portion of the actual browser DOM updates. And React virtual DOM can batch refresh, the data changes twice within one event cycle (Event Loop) will be merged, for example, you first successive node content from AB, BA, React think that A becomes B, then and from B into a UI without any change, whereas if the manual control, this logic is usually extremely complex.
Although every time need to construct a complete virtual DOM tree, but because DOM is a virtual memory data, performance is very high, and part of the actual operation of the DOM is just Diff points, which can achieve improved performance. Thus, to ensure performance, while developers will no longer need to focus on how changes to a data update one or more specific DOM element, but only a concern in any state data, the entire interface is how Render. Data-driven, declarative
features and advantages of React
virtual DOM
our previous dom is operated by document.getElementById () way, this process is actually go read the html dom structure, converting the structure into a variable, then operate and reactjs defines a set of variables in the form of dom model, all operations and direct conversion in a variable, thus reducing operating dom real, real performance is quite high, and mainstream MVC framework are essentially different, and does not deal with dom
components of the system
the core idea is to react to any page in one area or element can be seen as a component of the component
then what is the component of it?
Refers to the components at the same time contains html, css, js, image element aggregate
core usage react development is split into a plurality of page components, and a component coupled simultaneously react the css, js, image, this model subvert the whole way past traditional
way data flow
in fact, is the core of reactjs data binding, so-called data binding means that as long as some of the server-side data binding and the front page is good, the developers focus only on the line for business
JSX grammar
in vue, we use the render function to build a high performance structural components dom, because the process of finding and eliminating the need for compiling templates, but when using the createElement to create a structure in the lower readability render, the more complex , then you can use jsx syntax to create a dom in the render, the solution to this problem, but the premise is the need to use tools to compile jsx
JSX syntactic sugar
JSX is a syntax full name: JavaScript xml
JSX syntax is not necessary to use, but because of the use the difficulty will reduce our development after grammar JSX, therefore this syntax again become syntactic sugar
JSX when not in use, it is necessary to use React.createElement dom to create structural components, but such wording though not need to compile, but is very difficult to maintain and develop, and poor readability
Var world = React.createElement ( ' h1 of ', {
className:' ABC ',
ID:' haha '
}, [
React.createElement (' span ', null,' the Hello '), React.createElement (' Mark ', null,'

// use ReactDOM object render method to render the component to a node in ReactDOM.render (world, document.getElementById ( "app1 ")) `` `
promptly after use JSX grammar, but also need to be compiled to native createElement the
JSX is used in the js xml, however, this is not true xml xml, xml can only learn from some of the syntax, for example:
the outermost layer must have a root node, the label must be closed