react虚拟dom中旧js对象是如何跟新js对象进行对比（代码层面）如何实现

Question

我听说是同级对比但是通过代码如何实现
比如
旧js对象
{'div','class=a',{children}}
新js对象
{'div','class=b',{children}}

js对象与js对象对比

1.我想知道底层是通过什么方法（代码）对比
是遍历吗？

2.找到了不同处后面的子节点都不再对比了吗？直接删除后面重新生成？

Answer 1

class VNode {
  constructor (tagName, props, children) {
    this.tagName = tagName
    this.props = props
    this.children = children
  } 

  render () {
    const { props, children } = this,
      dom = document.createElement(this.tagName)
    Object.entries(props).map(([key, value]) => dom.setAttribute(key, value))
    children.map(o => dom.appendChild(o instanceof VNode ? o.render() : document.createTextNode(o)))
    return dom
  }
}

const h = (tagName, props, children) => new VNode(tagName, props, children)

react的createClass 了解一下

Answer 2

https://zhuanlan.zhihu.com/p/...