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

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

js对象与js对象对比

1.我想知道底层是通过什么方法(代码)对比
是遍历吗?

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

阅读 474
评论 2019-01-22 提问
    2 个回答
    kalo
    • 27
    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 了解一下

    评论 赞赏
      李十三
      • 11.4k
      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒