React-原始碼解析-DOM模型

mazy發表於2018-06-22
React原始碼模型

image

JSX解析

1.jsx建立的虛擬元素會被編譯成React的createElement方法

var ReactElement = function(type, key, ref, self, source, owner, props) {
  var element = {
    // 這個標籤允許我們將其作為一個反應元素進行唯一的識別
    $$typeof: REACT_ELEMENT_TYPE,

    // 屬於元素的內建屬性
    type: type,
    key: key,
    ref: ref,
    props: props,

    // 記錄負責建立該元素的元件
    _owner: owner,
  };
  return element;
};

ReactElement.createElement = function(type, config, children) {
  //初始化引數
  var propName;
  var props = {};
  var key = null;
  var ref = null;
  var self = null;
  var source = null;
  //如果存在cinfig就提取裡面的內容
  if (config != null) {
    //如果存在ref,key就賦值屬性
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    //複製config裡的內容到props中,除了上面賦值的這些屬性
    for (propName in config) {
      if (hasOwnProperty.call(config, propName) &&!RESERVED_PROPS.hasOwnProperty(propName)) {
        props[propName] = config[propName];
      }
    }
  }
  //處理children,全部掛載到props的children屬性上,如果只有一個引數,直接賦值給children,否則合併處理
  var childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    var childArray = Array(childrenLength);
    for (var i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;//合併成名為childArray的陣列
  }
  //如果某個prop為空且存在預設的prop,則將預設prop賦給當前的prop
  if (type && type.defaultProps) {
    var defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  //返回一個ReactElement例項物件
  return ReactElement( type,  key, ref, self, source, ReactCurrentOwner.current, props, );
};
複製程式碼

2.建立元件

使用React建立元件,會先呼叫instantiateReactComponent, 這是初始化元件的入口,通過判斷引數node的型別來區分建立什麼型別的元件

  1. 當node為空時,說明node不存在,則初始化一個空的元件. ReactEmptyComponent.create(instantiateReactComponent)。
  2. 當node型別為物件時,那麼就是DOM標籤元件或者說是自定義元件, 如果element型別(element = node,element.type='string')為字串,就會初始化一個dom標籤元件:ReactNativeComponent.createInternalComponent(element)， 否則就會初始化一個自定義元件 ReactCompositeComponentWrapper()
  3. 當node型別為字串或者數字時,則初始化文字元件,ReactNativeComponent.createInstanceForText(node)。
  4. 其餘情況不做處理
//初始化元件的入口:已刪除不在主線路線的程式碼
function instantiateReactComponent(node, shouldHaveDebugID) {
  var instance;
  if (node === null || node === false) {
    //node為空的時候建立一個空元件
    instance = ReactEmptyComponent.create(instantiateReactComponent);
  } else if (typeof node === 'object') {
    var element = node;
    // node為object並且element的type為string,建立dom元件
    if (typeof element.type === 'string') {
      instance = ReactHostComponent.createInternalComponent(element);
    } else if (isInternalComponentType(element.type)) {
      //不處理:不是字串表示的自定義元件暫時無法使用,此處不做元件初始化操作
      instance = new element.type(element);
    } else {
      //建立自定義元件
      instance = new ReactCompositeComponentWrapper(element);
    }
  } else if (typeof node === 'string' || typeof node === 'number') {
    //建立文字元件
    instance = ReactHostComponent.createInstanceForText(node);
  } else {
    //不做處理
  }
  // 這兩個欄位被DOM和ART擴散演算法使用
  instance._mountIndex = 0;
  instance._mountImage = null;
  return instance;
}
複製程式碼

2.1文字元件

  1. 根據transaction.useCreateElement判斷文字是不是通過createElement建立的節點
  2. 是,則為這個節點建立標籤和標識domID就可以參與虛擬dom的diff
  3. 如果不是就直接返回文字
var ReactDOMTextComponent = function(text) {
  //儲存當前字串
  this._currentElement = text;
  this._stringText = '' + text;
  //ReactDOMComponentTree時需要的引數
  this._hostNode = null;
  this._hostParent = null;
  //屬性
  this._domID = 0;
  this._mountIndex = 0;
  this._closingComment = null;
  this._commentNodes = null;
};

Object.assign(ReactDOMTextComponent.prototype, {
  mountComponent: function(transaction, hostParent, hostContainerInfo, context, ) {
    var domID = hostContainerInfo._idCounter++;
    var openingValue = ' react-text: ' + domID + ' ';
    var closingValue = ' /react-text ';
    this._domID = domID;
    this._hostParent = hostParent;
    //根據transaction.useCreateElement判斷文字是否是通過createElement方法建立的節點
    if (transaction.useCreateElement) {
      //如果是createElement建立的節點,為這個節點建立相應的標籤和標識domID,這樣就跟別的React節點一樣,可以參與虛擬dom的diff權利
      var ownerDocument = hostContainerInfo._ownerDocument;
      var openingComment = ownerDocument.createComment(openingValue);
      var closingComment = ownerDocument.createComment(closingValue);
      var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
      //開始標籤
      DOMLazyTree.queueChild(lazyTree, DOMLazyTree(openingComment));
      //如果是文字型別,則建立文字節點
      if (this._stringText) {
        DOMLazyTree.queueChild(
          lazyTree,
          DOMLazyTree(ownerDocument.createTextNode(this._stringText)),
        );
      }
      //結束標籤
      DOMLazyTree.queueChild(lazyTree, DOMLazyTree(closingComment));
      ReactDOMComponentTree.precacheNode(this, openingComment);
      this._closingComment = closingComment;
      return lazyTree;
    } else {
      //如果不是通過createElemet建立的節點,則直接返回文字
      var escapedText = escapeTextContentForBrowser(this._stringText);//boolean number轉為字串
      //靜態頁面下直接返回文字
      if (transaction.renderToStaticMarkup) {
        return escapedText;
      }
      //如果不是通過createElement建立的文字,則將標籤和屬性註釋掉,直接返回文字內容
      return ( '<!--' + openingValue + '-->' + escapedText + '<!--' + closingValue + '-->' );
    }
  },

  //更新文字內容
  receiveComponent: function(nextText, transaction) {
    if (nextText !== this._currentElement) {
      this._currentElement = nextText;
      var nextStringText = '' + nextText;
      if (nextStringText !== this._stringText) {
        this._stringText = nextStringText;
        var commentNodes = this.getHostNode();
        //更新文字內容
        DOMChildrenOperations.replaceDelimitedText(
          commentNodes[0],
          commentNodes[1],
          nextStringText,
        );
      }
    }
  },
});
複製程式碼

2.2 DOM標籤元件

  1. 虛擬dom涵蓋了原生的DOM標籤,使用div不是原div,他是一個虛擬dom物件,標籤名相同
  2. 屬性更新:更新樣式,更新屬性,處理事件
  3. 子節點更新:更新內容,更新子節點,

屬性更新

 /**
   * 在mountComponent中通過這個方法處理DOM節點的屬性和時間
   * 1  如果存在事件,則針對當前的節點新增事件代理,既呼叫enqueuePutListener(this, propKey, propValue, transaction);
   * 2  如果存在樣式,首先會對樣式進行合併,Object.assign({},props.style,);然後通過CSSPropertyOperations.createMarkupForStyles( propValue,this,)建立樣式
   * 3  通過DOMPropertyOperations.createMarkupForProperty(propKey,propValue,);建立屬性
   * 4  通過DOMPropertyOperations.createMarkupForID(this._domID)建立唯一標識
   */
  _createOpenTagMarkupAndPutListeners: function(transaction, props) {
    var ret = '<' + this._currentElement.type;
    //for in + hasOwnProperty組合,for in會迭代原型鏈,hasOwnProperty只是該物件
    //迭代屬性,如果屬性不在該props上執行下次迴圈
    for (var propKey in props) {
      if (!props.hasOwnProperty(propKey)) {
        continue;
      }
      var propValue = props[propKey];
      if (propValue == null) {
        continue;//取出來的屬性為null,執行下次迴圈
      }
      if (registrationNameModules.hasOwnProperty(propKey)) {//????應該是事件
        if (propValue) {
          //新增事件代理
          enqueuePutListener(this, propKey, propValue, transaction);
        }
      } else {
        if (propKey === STYLE) {
          if (propValue) {
            //如果有樣式,合併樣式
            propValue = this._previousStyleCopy = Object.assign({},props.style,);
          }
          //建立樣式
          propValue = CSSPropertyOperations.createMarkupForStyles( propValue,this,);
        }
        //建立屬性標識
        var markup = null;
        if (this._tag != null && isCustomComponent(this._tag, props)) {
          if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
            markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey,propValue,);
          }
        } else {
          markup = DOMPropertyOperations.createMarkupForProperty(propKey,propValue,);
        }
        if (markup) {
          ret += ' ' + markup;
        }
      }
    }
    //靜態頁面,不設定react-id
    if (transaction.renderToStaticMarkup) {
      return ret;
    }
    //設定react-id
    if (!this._hostParent) {
      ret += ' ' + DOMPropertyOperations.createMarkupForRoot();
    }
    ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID);
    return ret;
  },

複製程式碼
當執行receiveComponent方法時,通過this.updateComponent()更新DOM節點屬性
  receiveComponent: function(nextElement, transaction, context) {
    var prevElement = this._currentElement;
    this._currentElement = nextElement;
    //更新DOM節點屬性
    this.updateComponent(transaction, prevElement, nextElement, context);
  }
複製程式碼
在updateComponent中通過this._updateDOMProperties(lastProps, nextProps, transaction)更新DOM節點屬性
  /**
   * 先是刪除不需要的舊屬性
   *    如果不需要舊樣式,則遍歷舊樣式集合,並對每個樣式進行置空操作
   *    如果不需要事件,則將其的事件監聽去掉,針對當前節點取消事件代理deleteListener(this, propKey)
   *    如果舊屬性不在新屬性集合中,則需要刪除舊屬性DOMPropertyOperations.deleteValueForProperty(getNode(this), propKey);
   * 然後更新新屬性
   *    如果存在新樣式,則將新樣式進行合併Object.assign({}, nextProp)
   *    如果在舊樣式中但不在新樣式中,則清除該樣式
   *    如果既在舊樣式中也在新樣式中,且不相同,則更新該樣式styleUpdates[styleName] = nextProp[styleName];
   *    如果在新樣式中,但不在舊樣式中,則直接更新為新樣式styleUpdates = nextProp;
   *    如果存在事件更新,則新增事件監聽的屬性enqueuePutListener(this, propKey, nextProp, transaction);
   *    如果存在新屬性,則新增新屬性,或者更新舊的同名屬性DOMPropertyOperations.setValueForAttribute( getNode(this), propKey, nextProp, );
   * 
   */
  _updateDOMProperties: function(lastProps, nextProps, transaction) {
    var propKey;
    var styleName;
    var styleUpdates;
    for (propKey in lastProps) {
      //舊屬性不在新屬性集合中
      //新屬性集合中包括舊屬性or舊屬性在舊屬性原型鏈上or舊屬性為null,執行下次迴圈,相當於刪除了這個屬性
      if ( nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null ) {
        continue;
      }
      //從dom上刪除不需要的樣式??? TODO 這不是刪除了所有樣式嗎
      if (propKey === STYLE) {
        var lastStyle = this._previousStyleCopy;
        for (styleName in lastStyle) {
          if (lastStyle.hasOwnProperty(styleName)) {
            styleUpdates = styleUpdates || {};
            styleUpdates[styleName] = '';
          }
        }
        this._previousStyleCopy = null;
      } else if (registrationNameModules.hasOwnProperty(propKey)) {
        if (lastProps[propKey]) {
          //去掉事件監聽,取消事件代理
          deleteListener(this, propKey);
        }
      } else if (isCustomComponent(this._tag, lastProps)) {
        if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
          DOMPropertyOperations.deleteValueForAttribute(getNode(this), propKey);
        }
      } else if (DOMProperty.properties[propKey] ||DOMProperty.isCustomAttribute(propKey)) {
        //刪除不需要的屬性
        DOMPropertyOperations.deleteValueForProperty(getNode(this), propKey);
      }
    }
    for (propKey in nextProps) {
      var nextProp = nextProps[propKey];
      var lastProp = propKey === STYLE ? this._previousStyleCopy : lastProps != null ? lastProps[propKey] : undefined;
      //不在新屬性中,或者和舊屬性相同跳過
      if ( !nextProps.hasOwnProperty(propKey) || nextProp === lastProp || (nextProp == null && lastProp == null) ) {
        continue;
      }
      if (propKey === STYLE) {
        if (nextProp) {
          //合併樣式
          nextProp = this._previousStyleCopy = Object.assign({}, nextProp);
        } else {
          this._previousStyleCopy = null;
        }
        if (lastProp) {
          //在舊樣式中不在新樣式中,清除該樣式
          for (styleName in lastProp) {
            if (lastProp.hasOwnProperty(styleName) &&(!nextProp || !nextProp.hasOwnProperty(styleName))) {
              styleUpdates = styleUpdates || {};
              styleUpdates[styleName] = '';
            }
          }
          // 既在舊樣式中,也在新樣式中,且不相同,則更新該樣式
          for (styleName in nextProp) {
            if (nextProp.hasOwnProperty(styleName) &&lastProp[styleName] !== nextProp[styleName]) {
              styleUpdates = styleUpdates || {};
              styleUpdates[styleName] = nextProp[styleName];
            }
          }
        } else {
          // 不存在舊樣式,直接寫入新樣式
          styleUpdates = nextProp;
        }
      } else if (registrationNameModules.hasOwnProperty(propKey)) {
        if (nextProp) {
          //新增事件監聽的屬性
          enqueuePutListener(this, propKey, nextProp, transaction);
        } else if (lastProp) {
          deleteListener(this, propKey);
        }
        //新增新的屬性,或者是更新舊的同名屬性
      } else if (isCustomComponent(this._tag, nextProps)) {
        if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
          //更新屬性
          DOMPropertyOperations.setValueForAttribute( getNode(this), propKey, nextProp, );
        }
      } else if ( DOMProperty.properties[propKey] || DOMProperty.isCustomAttribute(propKey) ) {
        var node = getNode(this);
        if (nextProp != null) {
          DOMPropertyOperations.setValueForProperty(node, propKey, nextProp);
        } else {
          //如果更新為null或者undefined 則執行刪除屬性操作
          DOMPropertyOperations.deleteValueForProperty(node, propKey);
        }
      }
    }
    //如果styleUpdates不為空,則設定新樣式
    if (styleUpdates) {
      CSSPropertyOperations.setValueForStyles(getNode(this),styleUpdates,this,);
    }
  },

複製程式碼

更新子節點

在執行mountComponent方法時,通過this._createContentMarkup(transaction, props, context);處理DOM節點的內容

  _createContentMarkup: function(transaction, props, context) {
    var ret = '';
    //獲取子節點渲染出的內容
    var innerHTML = props.dangerouslySetInnerHTML;
    if (innerHTML != null) {
      if (innerHTML.__html != null) {
        ret = innerHTML.__html;
      }
    } else {
      var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null;
      var childrenToUse = contentToUse != null ? null : props.children;
      if (contentToUse != null) {
        // TODO: Validate that text is allowed as a child of this node
        ret = escapeTextContentForBrowser(contentToUse);
      } else if (childrenToUse != null) {
        //對子節點進行初始化渲染
        var mountImages = this.mountChildren( childrenToUse, transaction, context, );
        ret = mountImages.join('');
      }
    }
    // 是否需要換行
    if (newlineEatingTags[this._tag] && ret.charAt(0) === '\n') {
      return '\n' + ret;
    } else {
      return ret;
    }
  },

複製程式碼

當執行receiveComponent方法時,通過this._updateDOMChildren(lastProps, nextProps, transaction, context);更新DOM內容和子節點

  /**
   *  先是刪除不需要的子節點和內容
   *      如果存在舊節點,而新節點不存在,說明當前節點在更新之後刪除,執行this.updateChildren(null, transaction, context);
   *      如果舊的內容存在,而新的內容不存在,說明當前內容在更新後被刪除,此時執行 this.updateTextContent('');
   *  更新子節點和內容
   *      如果新子節點存在,則更新其子節點,此時執行this.updateChildren(nextChildren, transaction, context);
   *      如果新的內容存在,則更新內容,此時執行方法this.updateTextContent('' + nextContent);
   * 
   */
  _updateDOMChildren: function(lastProps, nextProps, transaction, context) {
    //初始化
    var lastContent = CONTENT_TYPES[typeof lastProps.children]  ? lastProps.children : null;
    var nextContent = CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;
    var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html;
    var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html;

    var lastChildren = lastContent != null ? null : lastProps.children;
    var nextChildren = nextContent != null ? null : nextProps.children;

    var lastHasContentOrHtml = lastContent != null || lastHtml != null;
    var nextHasContentOrHtml = nextContent != null || nextHtml != null;
    if (lastChildren != null && nextChildren == null) {
      //舊節點存在,而新節點不存愛,說明當前節點在更新後被刪除了
      this.updateChildren(null, transaction, context);
    } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
      //說明當前內容在更新後被刪除了
      this.updateTextContent('');
    }
    //新節點存在
    if (nextContent != null) {
      if (lastContent !== nextContent) {
        //更新內容
        this.updateTextContent('' + nextContent);
      }
    } else if (nextHtml != null) {
      //更新屬性標識
      if (lastHtml !== nextHtml) {
        this.updateMarkup('' + nextHtml);
      }
    } else if (nextChildren != null) {
      //更新子節點
      this.updateChildren(nextChildren, transaction, context);
    }
  },
複製程式碼

相關文章