vue vs. react mounting dom process
When parsing the vue: template tag,
1. Convert the template string into AST (Abstract Syntax Tree) through the parse function
2. Convert the AST into a render function through the generate function
3. There are many h functions (createElement function) in this render function ), calling these h functions to generate objects one after another. These objects are related to each other to generate a virtual dom tree.
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 1.parse，模板字符串 转换成 抽象语法树(AST)
const ast = parse(template.trim(), options)
// 2.optimize，对 AST 进行静态节点标记
if (options.optimize !== false) {
optimize(ast, options)
}
// 3.generate，抽象语法树(AST) 生成 render函数代码字符串
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})
The difference between virtual dom and ast
Virtual dom and ast, the abstract syntax tree, both involve page rendering. When I first started learning, I often confused the two. In fact, they are completely different concepts. Both use objects for abstract representation, but virtual dom is an abstract representation of real dom in the form of objects, while ast is an abstract representation of grammatical structures.
How to map virtual Vnode to real DOM?
Call the _update method on the Vue prototype to map the virtual DOM to the real DOM. It can be known from the source code that there are two timings for calling _update, one occurs during the initial rendering phase, and the other occurs during the data update phase.
Note: In the virtual dom, the elm attribute is the real dom. That is to say, the generated virtual dom creates the real dom at the same time. In other words, the first rendering, Vue is more complicated than simply creating the dom element. The efficiency is low. The efficiency of vue is reflected in the virtual dom that responds to data changes compared to
vm._update
lifecycleMixin()
function lifecycleMixin() {
Vue.prototype._update = function (vnode, hydrating) {
var vm = this;
var prevEl = vm.$el;
var prevVnode = vm._vnode; // prevVnode为旧vnode节点
// 通过是否有旧节点判断是初次渲染还是数据更新
if (!prevVnode) {
// 初次渲染
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false)
} else {
// 数据更新
vm.$el = vm.__patch__(prevVnode, vnode);
}
}
The core of calling patch in update to generate a real dom
patch function is to perform dom operations by calling the createElment method, create nodes, insert child nodes, recursively create a complete DOM tree and insert it into the body . And during the generation of the real stage, there will be a diff algorithm to judge the difference between the front and rear Vnodes in order to minimize the change of the real stage.
react:
◼ In fact, jsx is just syntactic sugar for the React.createElement(component, props, ...children) function .
All jsx will eventually be converted into function calls of React.createElement.
createElement needs to pass three parameters :
◼ Parameter 1: type
The type of the current ReactElement;
If it is a label element, then use the string to represent "div";
If it is a component element, then use the name of the component directly;
◼ Parameter two: config
All attributes in jsx are stored in config in the form of object attributes and values;
For example, pass in className as the class of the element;
◼ Parameter three: children
The content stored in the tag, with Stored in the form of children array;
Of course, what if there are multiple elements? React processes them internally. The source code for processing is below.
What is the role of this ReactElement object? Why did React create it?
The reason is that React uses ReactElement objects to form a JavaScript object tree ;
The JavaScript object tree is the virtual DOM (Virtual DOM);
What is the role of virtual dom?
1. When the page is updated, the virtual DOM is compared through the diff algorithm, and then the changes are re-rendered to the interface instead of rendering the entire page, which improves the performance of the program. 2. The biggest benefit of the virtual DOM is that it abstracts the rendering
process , bringing cross-platform capabilities to applications , no longer just limited to the browser side . For example, React-Native and WeeX can run on Android and IOS platforms. The same virtual DOM is rendered into a button on the web side and a button control on the mobile side...
React rendering mechanism
