https://www.jianshu.com/p/8141b08c9303
virtual DOM: in-memory representation or clone of the real DOM which minimizes updates of the DOM itself (update the browser DOM only when needed, ensure that update is as minimal as possible, increasing application speed and performance)
diff virtual dom -> manipulate real dom
React uses what is called a virtual DOM, to keep track of changes behind the scenes. When state data updates, it triggers a re-render of the components using that data - including child components that received the data as a prop. React updates the actual DOM, but only where necessary. This means you don't have to worry about changing the DOM. You simply declare what the UI should look like.
React.createElement(component, props, ...children)生成一个js对象，就是虚拟dom，这个对象是用来代表一个真实的dom node。
虚拟dom的意思是用js对象结构模拟出html中dom结构，批量的增删改查先直接操作js对象，最后更新到真正的dom树上，因为直接操作js对象的速度要比操作dom的那些api要快。将DOM对比操作放在js层，提高效率。
传统的dom节点，是这样的
<div>
<p class='text'>内容</p>
</div>
Vnode是长这样的
{
nodeName:'div',//节点名字
attributes:{},//属性键值对
children:[],//子节点
key: undefined,//节点的唯一值
...
}
虚拟DOM就是一个普通的JavaScript对象，包含了tag、props、children三个属性。
createElement
https://easyontheweb.com/virtual-dom-in-react/
The Virtual DOM
First things first, the most important thing that you need to know is that we manipulate the DOM a lot in interactive web applications. I suppose that is why we use React, don’t we? Another thing to know is that DOM manipulation is super slow. We must not try to manipulate the DOM directly (like JQuery used to).
To overcome this issue of slow DOM manipulation, the creators of React came up with the idea of the Virtual DOM. This virtual DOM is nothing but a light-weight copy of the real DOM that React keeps. This virtual DOM is light weight because it does not have the capability to change what is on the webpage. So, what is it useful for?
The virtual DOM is used for comparison! On any change , React compares the latest version of virtual DOM to the second last version of it. This process is called ‘diffing’ because it tries to figure out what all things are different in the latest one. Only those differences are then changed in the real DOM , making this change much faster.
What exactly is the virtual DOM ?
Now that we know what the virtual DOM is , let us get to know it’s internals.
Well, the virtual DOM is nothing but a Javascript Object. Let us see how it gets created and what it does.
Everytime we write JSX (or TSX) what React does under the hood is call the React.createElement function. This function is in charge of creating an element in the virtual DOM. Whatever JSX you pass into it, it will create a React element out of it and make it a part of the virtual DOM object. This object has three properties -> tag, props and children.
As the names suggest, the tag property is the name of the tag (div, h , p etc) , the props are the props that we pass in React and children are the inner nodes for that particular JSX tag.
React creates a tree sort of thing because the children themselves are React elements created using the same React.createElement function. So, it has recursively created this virtual DOM tree.
如何使用Vnode？
想要实现一个vdom，大概过程应该有以下三步：
1.compile，如何把真实DOM编译成vnode。
2.diff，如何知道oldVnode和newVnode之间有什么变化。
3.patch， 把这些变化用打补丁的方式更新到真实dom上去。
vdom的两个核心api
1. h函数（将真实dom映射成虚拟节点）
h('<html 标签名>'，{属性}，[children])//含有子节点的
h('<html 标签名>'，{属性}，'text'])//没有子节点，只有文本，如<p>this is VN</p>
h是指hyperscript，一种可以通过js来创建html的库。
<div><p class='text'>内容</p></div>
//经过babel编译，然后将它们传递给h函数调用
h('div',null,h('p',{className:'text'},'内容'))
//React.createElement函数的作用就跟这h函数一样，结果是为了获得一个vnode，虚拟节点
创建一个节点的实现思路(简易的)
2. patch函数（通过对比新旧虚拟节点，找出差异（diff算法），再把这些变化更新到真实dom中）
patch(container, vnode)//初次渲染
patch(oldVnode, newVnode); //re-render 更新渲染
那么虚拟dom又是如何转为真实的DOM？render的过程发生了什么？
前面提到React的核心虚拟DOM可以将真实的dom节点以obj对象的形式来表示，通过对比新旧的obj对象的差异，更改页面相对应的变化节点。而React.render实际上就相当于是vdom里面的patch函数，patch函数接收两个参数。
首次渲染是如何进行？patch(container, newVnode)
再次渲染是如何进行？patch(oldVnode, newVnode)
patch(container,vnode)和patch(oldVnode,newVnode)的实现也是diff算法的一个实现过程，通过调用createElement和updateChildren方法让页面上的节点创建和更新。
当然真正的diff算法是非常复杂的，以上的方法只是一个思路，增删节点，重新排序，属性样式事件等变化，都是非常复杂的。
网友评论