React-Vnode

1. 为什么用？

react渲染和操作真实DOM开销非常大，有时候我们操作某个数据的变化，就会引起整个DOM层的重绘和重排，非常消耗性能。这时千呼万唤，Vnode就可以解决这个痛点。

2. 什么是Vnode

Vnode其实是一个用于表示真实DOM结构和属性的js对象，这个对象用于对比虚拟DOM和当前真实DOM的差异化，然后从局部渲染从而达到优化性能的目的。比如用js描述一个人：

{ name: 'Jack', age: 20, sex: 'male', children: null }

3. 优点

• 肯定是性能优化

  减少了DOM操作，不论页面有任何变化，都是Vnode和真实DOM对比之后，只需要在最后挂载阶段重新render即可，不需要重复渲染。

• 兼容性强，不受执行环境的影响。

  因为是js对象，所以在浏览器和node端都可以执行，从而获得了服务端渲染，原生渲染，手写函数渲染的能力。

4. 如何用

<div>
    <p className="text">text</p>  
</div>

// 经过babel编译，将他们传递给h函数调用
h(
    'div',
  null,
  h('p', {className: 'text'}, 'text')
)
// react中的React.createElement函数作用跟h函数作用基本一样，结果是为了获取vnode

Vdom的两个核心api

• h函数

  h是指hyperscript，一种可以通过js来创建html的库，输出一个dom节点的js对象，类似：

  {
    "nodeName": "div",
    "attributes": {},
    "children": [...],
    "key": "id"
  }
  

  h函数结束后，就开始调用render函数了。

• path函数

  render阶段，首次渲染调用path(container, vnode)，更新渲染的时候调用path(vnode, newVnode)，通过diff算法，修改真实dom。