virtual dom

首先，我们要知道react里面 virtual dom结构：

    const dom = {
        tagName: 'div',
        properties: {
            style: [],
            ...
        },
        key:'',
        children: [],
    }

上述结构非常清晰明了，virtual dom中的节点称为reactNode，reactNode分为 reactElement，reactText， ReactFragment， 其中reactElement又分为reactComponentElement和reactDomElement。 null、undefined、boolean都是reactEmpty元素。

• 创建react元素，可以通过JSX创建或者React.createELement，其实JSx本质就是createElement的语法糖。初始化组件会对入参节点进行判断，如果node为空，则通过ReactEmptyComponent.create；如果是对象，element为字符串，通过ReactNativeComponent创建。否则通过ReactCompositeComponentWrapper创建；如果是字符串或者数字，则通过ReactNativeComponent.createInstanceForText创建

• reactDomComponent更新属性
  先删除属性

  1. 如果删除属性存在事件代理，则用deleteListener取消事件代理，然后删除属性

  然后添加属性

  1. 如果存在事件，则通过enqueuePutListener添加事件代理
  2. 如果存在样式，先对样式就行合并，然后创建样式
  3. 创建属性
  4. 创建属性的唯一标识 this._domID

• reactDomComponent更新子节点

  1. 先删除不需要的子节点和内容，删除子节点执行方法this.upateChilren（null，transaction，context），删除节点内容执行方法this.updateTextContent（‘’）.
  2. 更新子节点和内容this.upateChilren（nextChildren，transaction，context）和this.updateTextContent（‘’+nextContent）.

• 组件卸载时，reactDOmComponent，做了以下几个事情

1. 清空子节点
2. 注销事件代理
3. 销毁rootNodeID
4. 销毁domId