React internal project originated in Facebook, used to set up self instagram site.
The front end of three major frameworks:
angular.js ：
Big Brother front end of the frame, it is cumbersome to learn, an assembly for the introduction of defined. 2 began a series of reforms to enable component-based, also supports the use of Typescript program.
vue.js:
The hottest one front-end framework, Chinese-friendly document
Implementation of Component:
.vue file
react.js：
The most popular front-end frame, front good compatibility
Implementation of Component:
not as vue same files directly using the form js code, create any component, unlike vue district divided into three parts.
react core concepts:
Virtual DOM:
DOM is a functionality provided by the browser js, so we can only artificially fixed the API provided by the browser DOM to manipulate objects.
Virtual DOM : not provided by the browser, is achieved by the programmer manual simulation, similar to the browser's DOM but there are essential differences.
Nature : using js to simulate the DOM tree
manually simulated principle : using js create an object with the object to simulate each DOM node, then each DOM node, but also provides such attributes like children, to describe the current DOM child nodes, so that, when the DOM node forms a nesting relationship, to simulate a DOM tree.
Objective : To achieve efficient DOM node update.
Diff algorithm:
diff Tree : old and new DOM tree, step by step way of contrast, is called tree diff, front to back when we put all the layers of nodes after contrast, must find an element needs to be updated.
component diff : In contrast, when each layer, assembly contrast between the called component diff When comparing the time of formation, two components of the same type if, for the time being that this component does not need to be updated, if different types of components, Now the old assembly is removed, a new component, to replace the removed position.
diff Element : In the assembly, the element level comparison
Key : can DOM node on the virtual page and the DOM object, do one relationship.
