/**
 * @param {HTMLElement} dom 真实DOM
 * @param {vnode} vnode 虚拟DOM
 * @returns {HTMLElement} 更新后的DOM
 */
function diff( dom, vnode ) {
  // ...
}

// 原生DOM节点的vnode
{
  tag: 'div',
  attrs: {
    className: 'container'
  },
  children: []
}

// 文本节点的vnode
"hello,world"

// 组件的vnode
{
  tag: ComponentConstrucotr,
  attrs: {
    className: 'container'
  },
  children: []
}

// diff text node
if ( typeof vnode === 'string' ) {

  // 如果当前的DOM就是文本节点，则直接更新内容
  if ( dom && dom.nodeType === 3 ) {  // nodeType: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
    if ( dom.textContent !== vnode ) {
      dom.textCOntent= vnode;
    }
  // 如果DOM不是文本节点，则新建一个文本节点DOM，并移除掉原来的
  } else {
    out = document.createTextNode( vnode );
    if ( dom && dom.parentNode ) {
      dom.parentNode.replaceChild( out, dom );
    }
  }

  return out;
}

if ( !dom || dom.nodeName.toLowerCase() !== vnode.tag.toLowerCase() ) {
  out = document.createElement( vnode.tag );

  if ( dom ) {
    [ ...dom.childNodes ].map( out.appendChild );  // 将原来的子节点移到新节点下

    if ( dom.parentNode ) {
      dom.parentNode.replaceChild( out, dom );  // 移除掉原来的DOM对象
    }
  }
}

function diffAttributes( dom, vnode ) {

  const old = dom.attributes;  // 当前DOM的属性
  const attrs = vnode.attrs;   // 虚拟DOM的属性

  // 如果原来的属性不在新的属性当中，则将其移除掉（属性值设为undefined）
  for ( let name in old ) {

    if ( !( name in attrs ) ) {
      setAttribute( dom, name, undefined );
    }

  }

  // 更新新的属性值
  for ( let name in attrs ) {

    if ( old[ name ] !== attrs[ name ] ) {
      setAttribute( dom, name, attrs[ name ] );
    }

  }

}

// diff方法
if ( vnode.children && vnode.children.length > 0 || ( out.childNodes && out.childNodes.length > 0 ) ) {
  diffChildren( out, vnode.children );
}

function diffChildren( dom, vchildren ) {

  const domChildren = dom.childNodes;
  const children = [];

  const keyed = {};

  // 将有key的节点和没有key的节点分开
  if ( domChildren.length > 0 ) {
    for ( let i = 0; i  0 ) {

    let min = 0;
    let childrenLen = children.length;

    for ( let i = 0; i 

function diffComponent( dom, vnode ) {

  let c = dom && dom._component;
  let oldDom = dom;

  // 如果组件类型没有变化，则重新set props
  if ( c && c.cOnstructor=== vnode.tag ) {
    setComponentProps( c, vnode.attrs );
    dom = c.base;
  // 如果组件类型变化，则移除掉原来组件，并渲染新的组件
  } else {

    if ( c ) {
      unmountComponent( c );
      oldDom = null;
    }

    c = createComponent( vnode.tag, vnode.attrs );

    setComponentProps( c, vnode.attrs );
    dom = c.base;

    if ( oldDom && dom !== oldDom ) {
      oldDom._compOnent= null;
      removeNode( oldDom );
    }

  }

  return dom;

}

function renderComponent( component ) {
  
  // ...

  // base = base = _render( renderer );     // 将_render改成diff
  base = diff( component.base, renderer );

  // ...
}

class Counter extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      num: 1
    }
  }

  onClick() {
    this.setState( { num: this.state.num + 1 } );
  }

  render() {
    return (
      

        
count: { this.state.num }
         this.onClick()}>add
      
    );
  }
}

onClick() {
  for ( let i = 0; i <100; i++ ) {
    this.setState( { num: this.state.num + 1 } );
  }
}