Several core concepts in React
Virtual DOM
- The essence of DOM : a concept in the browser, using JS objects to represent elements on the page, and providing APIs to manipulate DOM objects;
- Virtual DOM : The concept in the framework is that programmers use JS objects to simulate the DOM and DOM nesting on the page;
- The purpose of the virtual DOM : in order to achieve efficient updates of DOM elements in the page;
- The difference between DOM and virtual DOM :
-
DOM:浏览器中提供的概念，用JS对象，表示页面上的元素，并提供操作元素的API； -
虚拟DOM：框架中的概念，是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系； - DOM tree :
a process of web page rendering:
1. The browser requests the server to obtain the HTML code of the page;
2. The browser parses the DOM structure in the memory, and renders a DOM tree in the browser memory;
3. The browser Present the DOM tree on the page;
Diff algorithm
-
tree diff:
The process of comparing the old and new DOM trees layer by layer; when the entire DOM tree is compared layer by layer, all the elements that need to be updated on demand must be found;
-
component diff：
During Tree diff, the comparison process of component level in each layer;
- If the component types are the same before and after the comparison, it is temporarily considered that the component does not need to be updated;
- If the types of components are different before and after the comparison, you need to remove the old components, create new ones, and append them to the page;
-
element diff:
When comparing components, if two components are of the same type, element-level comparison is required;
