npm install crete-react-app -g
create-react-app dom-diff

virtual-dom 相关

virtual-dom， 也就是虚拟节点，它通过JS的Object对象模拟DOM中都节点，然后再通过特定的render方法将其渲染成真实的DOM节点。

createElement -> { type, props, children }

createElement('ul', { class: 'list' }, [
    createElement('li', { class: 'item' }, '111'),
    createElement('li', { class: 'item' }, '222'),
    createElement('li', { class: 'item' }, '333'),
])

dom-diff则是通过JS层面的计算，返回一个patch对象，即在通过特定的操作解析patch对象，完成页面的重新渲染。

DOM DIFF比较二个虚拟DOM区别，就是比较两个对象的区别。 作用：根据两个虚拟对象创建出补丁，描述改变的内容，将这个补丁用来更新DOM

差异计算

先序深度优先遍历

1. 用JavaScript对象模拟DOM
2. 把此虚拟DOM转换成真实DOM，并插入页面中
3. 如果有事件发生修改了虚拟DOM比较两颗虚拟DOM树差异，得到差异对象
4. 把差异对象应用到真正的DOM树上